Personalizzare completamente l'aspetto di una select

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.
Ecco come ho risolto in generale
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;
        }
    }
}
Design and CSS - Previous
Gli stili delle Google Maps
Next - Design and CSS
Scrivere in verticale coi CSS
Last updated 2 years ago