A "causa" di un cliente particolarmente ostico ho scoperto una nuova regola CSS che non conoscevo prima.
select{appearance: none;}
Questo snippet permette di togliere completamente qualsiasi aspetto assegnato dal browser alla select in questione lasciando libero di poter inserire tutti gli elementi che preferiamo. Certo: vanno aggiunge anche quelle cose che posso essere utili come il bordo o le freccette di indicazione, ma si risolve facile con un altro po' di css.
Markup per la select:
<div class="form-group"><label for="form-select">Select</label><div class="fake-select"><select class="form-control" name="form-select" id="form-select"><option value="1">Select 1</option><option value="2">Select 2</option><option value="3">Select 3</option></select></div></div>
Stile SCSS:
.form-group{.fake-select{@extend .form-control;padding: 0;overflow: hidden;position: relative;select{border: 0;background: white;appearance: none;width: 100%;display: block;}&::after {content: "\f0dc";pointer-events: none;font-size: .76435rem;position: absolute;font-family: 'Font Awesome 5 Free';font-weight: 900;background: $primary;color: white;right: 0;top: 0;height: 100%;bottom: 0;width: 40px;text-align: center;display: flex;align-items: center;justify-content: center;}}}