De Style HTML balise select sur ios/safari/pour iPhone

J'ai trois listes déroulantes (trois <select> éléments). J'ai de style avec le css:

.dropdown{
    font-size: 20px;
    background: white;
    border:none;
    position: relative;
}

Dans google chrome, ils ont l'air parfaitement bien. Cependant quand j'ai tester le site sur mon iPhone 6s (ios 10.2.1) sur Safari le résultat est un peu différent, comme indiqué dans l'image:
De Style HTML balise select sur ios/safari/pour iPhone

Comme vous pouvez le voir il n'y a que gradient dans background et près de la flèche, la background est black.

Comment puis-je style la <select> éléments je voudrais donc avoir un arrière-plan white sur ios soit?

  • Vous pouvez utiliser stackoverflow.com/a/33126467/4042468 et définissez css dans votre code HTML.
  • Je ne comprends pas comment m'aider. Pouvez-vous expliquer votre solution de contournement?
  • les excuses, le mal lu votre question
InformationsquelleAutor Alin Crescens Ciurea | 2017-02-10
  1. 21

    Essayez d'ajouter cette CSS pour désactiver l'Ios par défaut style:

    -webkit-appearance: none;

    Cela permettra également de travailler sur d'autres éléments spéciaux de style, comme input[type=search].

    • En plus de cette réponse, veuillez aussi prendre note <select> éléments ne sont pas entièrement de style-mesure. Une recherche sur la question fournira assez peu de résultats. Le seul preuve solution de contournement est d'utiliser un plugin qui remplace le <select>s avec d'autres html éléments. Encore une fois, vous avez plusieurs options.
    • qui sera également masquer la flèche qui n'est pas ce que je voulais. Donc, est-il une solution pour remplacer la flèche?
    InformationsquelleAutor Stian Martinsen
  2. 2

    Comme Stian Martinsen suggéré -webkit-appearance: none; désactiver par défaut le style de <select> tag, mais il cache également la flèche. J'ai donc trouver une solution de contournement avec ce code:

    CSS:

    .dropdown{
font-size: 20px;
background: white;
border:none;
position: relative;
-webkit-appearance: none;
padding-right: 10px;
}
.dropdown:focus{
outline: none;
}
.plain-selector{
margin: 0 3px;
}
.plain-selector::after{
content: "";
position: absolute;
z-index: 2;
bottom: 30%;
margin-top: -3px;
height: 0;
width: 0;
right: 0;
border-top: 6px solid black;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
pointer-events: none;
}
.plain-selector::before{
content: "";
position: absolute;
z-index: 2;
top: 30%;
margin-top: -3px;
height: 0;
width: 0;
right: 0;
border-bottom: 6px solid black;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
pointer-events: none;
}
.out-selector{
position: relative;
}
.outter-selection{
width: 100%;
}
.selection{
display: block;
margin: auto;
border-radius: 50px;
background: white;
padding: 5px;
max-width: 360px;
text-align: center;
width: 90%;
position: relative;
}
body{
margin-top: 4em;
background: #2f2f2f;
color: white;
font-size: 23px;
}

    HTML:

    <div class="outter-selection">
<div class="selection">
<span class="out-selector"><span class="plain-selector"><select class="dropdown">
<option value="1" selected="selected">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
<option value="4">select 4</option>
</select></span></span>
<span class="out-selector"><span class="plain-selector"><select class="dropdown">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></span></span>
<span class="out-selector"><span class="plain-selector"><select class="dropdown">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></span></span>
</div>
</div>

    InformationsquelleAutor Alin Crescens Ciurea