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;
}
}
}
Last updated
Was this helpful?