web-dev-qa-db-fra.com

Flèche déroulante dans les cases de sélection ne figurant pas

J'utilise un thème wordpress et, pour une raison quelconque, les zones HTML select n'ont pas la liste déroulante. Ils ressemblent à de simples zones de texte input, mais lorsque vous cliquez dessus, vous pouvez voir la liste déroulante. Je ne trouve pas quel code pourrait effacer les flèches déroulantes. 

C'est tout ce que je vois dans le CSS:

input:focus {
outline: none;
}

select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius:0; 
border-radius:0; 
}
htmlcsswordpressdrop-down-menu
9
JA4677

Voici un choix de base

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Voyons maintenant où est votre problème:

select {
  -webkit-appearance: none;
  /*webkit browsers */
  -moz-appearance: none;
  /*Firefox */
  appearance: none;
  /* modern browsers */
  border-radius: 0;

}
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Ainsi, lorsque vous définissez none sur appearance, vous supprimez la flèche (qui est par défaut menulist) et lorsque vous définissez 0 sur border-radius, vous supprimez la border par défaut de select.

NOTESi vous avez caché la flèche dans IE avec cette règle select::-ms-expand { display: none; } pour avoir la flèche en arrière, vous devez la définir display:block

13
dippas

Vous avez remplacé la propriété -webkit-appearance pour select, qui a été définie comme étant -webkit-appearance: menulist; comme valeur par défaut par les navigateurs. 

8
dsaket

Vous pouvez envelopper la select dans une div et sur cette div vous pouvez donner à ::after élément et style 

div:after{
    position: absolute;
    top: 4px;
    right: 10px;
    color: #768093;
    font-family: #whichever font you wanna use# e.g Fontawesome;
    font-size: 20px;
    content: "\e842";
}

div:after{ 
    position: absolute;
    visibility: visible;
    font-family: FontAwesome;
    content: "\f096";
    font-size: 18px;
}
1
Shubham Yadav

La réponse est correcte pour la plupart mais ne fonctionne pas pour moi. Cela a fait le tour

select::-ms-expand { display: block; }
1
franer

J'ai essayé les solutions ci-dessus mais cela ne fonctionnait pas pour l'interface utilisateur, créée à l'aide de jquery.min.css. J'ai essayé ci-dessous css et cela a résolu mon problème. Ici, je cible .ui-icon-carat-d, qui affiche une flèche et une icône de menu déroulant:

.ui-icon-carat-d:after{
    background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
}
0
GSB