web-dev-qa-db-fra.com

CSS pour la "flèche vers le bas" sur un élément <select>?

Est-il possible de styliser la flèche vers le bas sur un élément de sélection déroulant? c'est-à-dire (<select><option>--></option></select>)

Je suppose que la réponse est non, en raison de la manière dont IE gère cet élément particulier. S'il n'y a pas moyen, quelqu'un connaît-il une "fausse" liste déroulante utilisant JavaScript qui imiterait ce comportement mais me permettrait de personnaliser?

jqueryhtmlcss
36
bugfixr

Peut-être que vous pouvez utiliser jQuery selectbox replacement . C'est un plugin jQuery.

12
Jan Hančič

Vous trouverez ici une solution géniale réservée aux styles pour les styles: http://bavotasan.com/2011/style-select-box-using-only-css/

En gros, encapsulez la sélection dans un conteneur div, attribuez à la sélection 18 fois plus large que le conteneur à fond transparent, créez un débordement: masqué dans le conteneur (pour supprimer la flèche générée par le navigateur) et ajoutez votre image d'arrière-plan de manière stylisée. flèche vers le conteneur. 

Ne fonctionne pas dans IE7 (ou 6), mais sérieusement, je vous dis que si vous utilisez IE7, vous méritez une expérience moins agréable.

49
jabram

Non, la flèche vers le bas est un élément du navigateur. Il est intégré [et différent] dans chaque navigateur. Vous pouvez toutefois remplacer la zone de sélection par une liste déroulante personnalisée à l'aide de javascript.

Jan Hancic a mentionné un plugin jQuery pour faire exactement cela.

5
Ty.

La liste déroulante est un élément de niveau plate-forme, vous ne pouvez pas lui appliquer de CSS.

Vous pouvez superposer une image par dessus en utilisant CSS et appeler l'événement click dans l'élément ci-dessous.

3
Diodeus - James MacFarlane

Vous ne pouvez pas très bien styler les combos en utilisant CSS.

Les gars de FogBugz ont fait un très bon combo personnalisé en utilisant JavaScript, donc c'est possible, il faut juste beaucoup de travail pour bien faire les choses. 

Mieux vaut rester avec le standard pour la version 1, puis voir si cela vaut la peine de le mettre à jour une fois que votre application est dans la nature.

3
Neil Barnwell

Je ne sais pas s'il est stylable avec CSS (probablement pas dans IE), mais s'il vous plaît: n'utilisez pas de "faux" menu déroulant utilisant javascript, car la facilité d'utilisation de ces éléments est généralement horrible. Entre autres choses, la navigation au clavier est généralement absente. 

2
wvanbergen

Vous pouvez y parvenir avec juste CSS et votre flèche bas en tant qu'image positionnée de manière absolue avec "pointer-events: none;" voir mon exemple ci-dessous:

<select>
  <option value="1">1 Person</option>
  <option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />

.passthrough {
    pointer-events: none;
    position: absolute;
    right: 0;
}
1
MayhemBliz

Essaye ça

   <div style='position:relative;left:0px;top:0px;
        onMouseOver=document.getElementById('visible').style.visibility='visible' 
        id='hidden'>10
   <select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
        onMouseOut=document.getElementById('visible').style.visibility='hidden'
        onChange='this.form.submit()' 
        id='visible' multiple size='3'>";
   <option selected value=10>10</option>
   <option value=20>20</option>
   <option value=50>50</option>
   </select>
   </div>
0
rubbermind

Vous devez créer votre propre liste déroulante à l'aide de divs masqués et d'un élément d'entrée masqué pour enregistrer l'option sélectionnée. Mon hypothèse est que le lien de @Jan Hancic qu'il a posté est probablement ce que vous recherchez. 

0
localshred

Cela changera les entrées, sélectionner etc le gris de style ancien, vous ne saurez pas si vous pourrez manipuler après cela: Dans <head> put:

<meta http-equiv="MSThemeCompatible" content="NO">
0
marsupial