Comment styliser un menu déroulant <select> avec uniquement du CSS ?

Question

Existe-t-il un moyen, uniquement en CSS, de donner du style à un fichier de type <select> dropdown ?

J'ai besoin de styliser un <select> autant qu'il est humainement possible, sans aucun JavaScript. Quelles sont les propriétés que je peux utiliser pour ce faire en CSS ?

Ce code doit être compatible avec tous les principaux navigateurs :

• Internet Explorer 6, 7 et 8
• Firefox
• Safari

Je sais que je peux le faire avec JavaScript : Exemple .

Et je ne parle pas d'un simple style. Je veux savoir ce que l'on peut faire de mieux avec CSS uniquement.

J'ai trouvé questions similaires sur Stack Overflow.

Et celui-ci sur Doctype.com.

Answer 1

Une solution indigène

Regardez ce violon, et pardonnez-moi le style excessif : https://jsfiddle.net/dkellner/7ac9us70/

• Vous connaissez déjà tous les éléments
• Vous pouvez les coiffer de la manière habituelle
• Très peu de JS impliqué.

L'astuce derrière : dès que la balise <select> obtient une propriété appelée "size", elle se comporte comme une liste de hauteur fixe et, soudain, pour une raison quelconque, vous permet de la styliser. Maintenant, à proprement parler, la liste fixe est un effet secondaire - mais il nous aide juste plus parce que nous l'utilisons pour le "look déposé".

Un exemple minimal :

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(pour rester simple je l'ai fait avec jQuery - mais vous pouvez faire la même chose sans)

Notes annexes

• Cette solution vous offre plus qu'une simple sélection : la valeur est également modifiable manuellement. Utilisez la propriété readonly si vous préférez la méthode par défaut de restriction de la sélection.

• Pour maximiser les possibilités de style, les balises <optgroup> ne sont pas autour de leurs enfants, ils sont émus avant eux. C'est intentionnel, c'est visuellement plus clair, et ils sont heureux de travailler comme ça, ne vous inquiétez pas.

• Javascripts : oui je sais que le PO a dit "pas de Javascript" mais j'ai compris qu'il s'agissait de ne vous embêtez pas avec les plugins ce qui est bien. Vous n'avez besoin d'aucune bibliothèque pour cette application. Pas même de jQuery, comme je l'ai dit, c'est seulement pour la clarté de l'exemple.

Answer 2

Un très bel exemple qui utilise :after et :before pour faire l'affaire est dans Styliser une boîte de sélection avec CSS3 | CSSDeck

Answer 3

Oui. Vous pouvez donner un style à tout élément HTML par son nom de balise, comme ceci :

select {
  font-weight: bold;
}

Bien entendu, vous pouvez également utiliser une classe CSS pour le styliser, comme tout autre élément :

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

Answer 4

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

Cela utilise une couleur de fond pour les éléments sélectionnés et j'ai enlevé l'image

Answer 5

Voici une solution basée sur mes idées préférées de cette discussion. Elle permet de styliser un élément <select> directement sans balisage supplémentaire.

Il fonctionne avec Internet Explorer 10 (et versions ultérieures) avec une solution de repli sûre pour Internet Explorer 8/9. Pour ces navigateurs, l'image d'arrière-plan doit être positionnée et suffisamment petite pour être cachée derrière le contrôle d'expansion natif.

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

CodePen

http://codepen.io/ralgh/pen/gpgbGx