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

Question

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

Demandé el 13 de Décembre, 2009: Quand la question a-t-elle été
564591 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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.

Demandé el 13 de Décembre, 2009 par Jitendra Vyas

58 votes

Je pense que c'est une question légitime, mais la réponse est "non, pas vraiment" ou "pas comme vous le souhaitez". Mais personne (ni moi) n'en est sûr à 100%, ce sentiment d'ambiguïté s'insinue dans la peau du lecteur et la légitimité de la question est remise en question.

Commenté el 13 de Décembre, 2009 par ZJR

1 votes

@Jitendra, je sais où vous voulez en venir. Nous aimerions que vous rendiez votre question plus explicite. De plus, je pense avoir trouvé ce que vous cherchez. C'est expérimental, mais regardez ça : cappuccino.org/aristo/showcase

Commenté el 13 de Décembre, 2009 par jeremyosborne

1 votes

@jeremyosborne - Merci pour la réponse. Je sais que je peux le faire avec javascript. Votre lien eaxmple est basé sur JS. J'ai posé cette question parce que je voulais savoir si quelqu'un sait ce que l'on peut faire de mieux avec css uniquement.

Commenté el 13 de Décembre, 2009 par Jitendra Vyas

Afficher 3 autres commentaires

Answer 1

5 Réponses

Answer 2

15voto

Kevin Christopher Henry Points 21199

Dans les navigateurs modernes, il est relativement facile de donner un style à l'élément <select> en CSS. Avec appearance: none La seule partie délicate est le remplacement de la flèche (si c'est ce que vous voulez). Voici une solution qui utilise une fonction inline data: URI avec SVG en texte clair :

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;

  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Le reste du style (bordures, rembourrage, couleurs, etc.) est assez simple.

Cela fonctionne dans tous les navigateurs que je viens d'essayer (Firefox 50, Chrome 55, Edge 38 et Safari 10). Une remarque à propos de Firefox est que si vous voulez utiliser l'option # dans l'URI des données (par ex. fill: #000 ), vous devez l'échapper ( fill: %23000 ).

Répondu el 13 de Janvier, 2017 par Kevin Christopher Henry (21199 Points )

1 votes

Vous pouvez également dimensionner le SVG avec la fonction height et/ou width de l'attribut <svg> au lieu de la propriété CSS background-size .

Commenté el 16 de Mai, 2019 par rednaw

Answer 3

12voto

gecko Points 51

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

Répondu el 1 de Septembre, 2010 par gecko (51 Points )

0 votes

Impossible de sélectionner quoi que ce soit avec Chrome actuel.

Commenté el 11 de Octobre, 2018 par Vitaly Zdanevich

Answer 4

9voto

Paul Sweatte Points 8668

Utilisez le clip pour recadrer les bordures et la flèche de l'image. select puis ajoutez vos propres styles de remplacement au wrapper :

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Utilisez une deuxième sélection avec une opacité nulle pour rendre le bouton cliquable :

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }

          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Les coordonnées diffèrent entre Webkit et les autres navigateurs, mais une @media query peut couvrir cela.

Références

Répondu el 7 de Janvier, 2012 par Paul Sweatte (8668 Points )

1 votes

Cela fonctionne bien pour moi, du moins dans chrome : position : absolute ; clip : rect(2px 85px 128px 2px) ; z-index : 2 ; padding-left : 18px ; padding-right : 18px ; margin : 7px auto ; color : #555 ; font-size : inherit ; background-color : transparent ;

Commenté el 19 de Mai, 2012 par BrianFreud

1 votes

J'ai constaté que le recadrage de la flèche ne fonctionne qu'à moitié dans IE7, car vous n'avez aucun contrôle sur la bordure de la sélection.

Commenté el 1 de Juin, 2012 par CpILL

1 votes

Ajout de la fonctionnalité de clic dans le cadre d'un Question connexe

Commenté el 5 de Décembre, 2012 par Paul Sweatte

Afficher 1 autres commentaires

Answer 5

9voto

Homar Points 21

Il n'est pas recommandé de modifier cet élément, mais si vous voulez essayer, c'est comme tout autre élément HTML.

Modifier l'exemple :

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

Répondu el 20 de Septembre, 2012 par Homar (21 Points )

2 votes

@MikkoP : lorsque vous suggérez des modifications, pourriez-vous fournir un résumé plus descriptif de la modification ? "Améliorer le message" n'est pas très utile comme résumé de haut niveau pour nous, les réviseurs. Merci.

Commenté el 21 de Septembre, 2012 par Jean-François Corbett

1 votes

@Jean-FrançoisCorbett Je vais essayer d'être plus précis :)

Commenté el 21 de Septembre, 2012 par MikkoP

1 votes

Vous ne pouvez pas donner un style aux éléments d'option (voir cette réponse SO : stackoverflow.com/a/7208814/703717 )

Commenté el 19 de Décembre, 2012 par Danield

Answer 6

8voto

Jayesh Points 7598

Si le style est une question importante, l'utilisation d'un widget entièrement personnalisé peut être utile, comme celui décrit dans l'article du blogue Réinventer une liste déroulante avec CSS et jQuery .

Répondu el 30 de Janvier, 2011 par Jayesh (7598 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: