Je ne semble pas être en mesure de supprimer la bordure (contour, encadré-ombre?) Par rapport à l'élément select
dans le navigateur Opera
.
Aucune des règles ci-dessous ne supprime la frontière:
select {
/*border: 0;*/
border: none;
outline: 0;
background: transparent;
border-image: none;
outline-offset: -2px;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
<select class="form-control">
<option selected="selected" value="0">Most Popular</option>
<option value="1">A-Z</option>
<option value="2">Z-A</option>
<option value="3">Lowest price</option>
<option value="4">Highest price</option>
</select>
La version Opera
est 46.0.2597.57 (PGO).
Le code ci-dessus fonctionne parfaitement dans les autres navigateurs testés - Chrome, Firefox, Internet Explorer et Edge.
Tout indice serait utile.
EDIT J'utilise Windows 10 64 bits, voici une capture d'écran:
Vous pouvez supprimer la bordure avec -webkit-appearance: none;
, mais cela supprime également le curseur, vous devrez donc peut-être l'ajouter à nouveau manuellement. Je n'ai pas réussi à trouver une meilleure réponse à cette question, car l'opéra est vraiment têtu avec cette frontière. (Solution mise à jour avec caret ci-dessous)
select {
border: 0;
outline: 0;
background: transparent;
border-image: none;
outline-offset: -2px;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
-webkit-appearance: none;
}
<select class="form-control" id="1">
<option selected="selected" value="0">Most Popular</option>
<option value="1">A-Z</option>
<option value="2">Z-A</option>
<option value="3">Lowest price</option>
<option value="4">Highest price</option>
</select>
Solution mise à jour: Il s’agit plus d’une solution de contournement que d’une solution, mais elle a un «faux» curseur en marche et ressemble à un menu déroulant sans bordure, même dans Opera.
select {
border: 0;
outline: 0;
background: transparent;
border-image: none;
outline-offset: -2px;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
-webkit-appearance: none;
width: 100% ;
position: absolute;
}
.select-wrapper {
position: relative;
max-width: 100px;
}
.select-wrapper:after {
content: "\25BE";
float: right;
margin-top: -3px;
}
<div class="select-wrapper" id="label-for-1">
<select class="form-control" id="1">
<option selected="selected" value="0">Most Popular</option>
<option value="1">A-Z</option>
<option value="2">Z-A</option>
<option value="3">Lowest price</option>
<option value="4">Highest price</option>
</select>
</div>
Vous pouvez utiliser quelque chose comme border: 1px solid white
pour superposer la bordure d’Opera si vous avez un arrière-plan solide derrière votre select
.
Ou vous pouvez appliquer des styles personnalisés pour les navigateurs Webkit à votre select
via des hacks CSS ciblant un navigateur spécifique, en supprimant l'apparence standard à l'aide de -webkit-appearance: none
et en appliquant SVG background-image
à la flèche standard. De cette façon, l'apparence standard de IE et de Firefox sera intacte.
select {
border: 0;
outline: 0;
background-color: transparent;
}
/* Select only webkit browsers */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {
/* remove arrow */
-webkit-appearance: none;
/* add some padding for image */
padding-right: 15px;
/* apply SVG with arrow */
/* change width value to move arrow to the left */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 15 15"><path d="M 8,5.5 11,9.5 14,5.5 z"></path></svg>');
background-repeat: no-repeat;
background-position: center right;
}
}
<select class="form-control">
<option selected="selected" value="0">Most Popular</option>
<option value="1">A-Z</option>
<option value="2">Z-A</option>
<option value="3">Lowest price</option>
<option value="4">Highest price</option>
</select>