Existe-t-il un moyen, uniquement en CSS, de donner du style à une liste déroulante "select" ?
J'ai besoin de donner du style à un formulaire "select" autant que possible, sans JavaScript. Quelles sont les propriétés que je peux utiliser pour le faire en CSS ?
Ce code doit être compatible avec les principaux navigateurs :
Je sais que je peux le faire avec JavaScript : [Exemple][1].
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é [des questions similaires][2] sur Stack Overflow.
Et [celle-ci][3] sur Doctype.com.
[1] : http://www.queness.com/post/204/25-jQuery-plugins-that-enhance-and-beautify-html-form-elements [2] : https://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box [3] : http://doctype.com/style-select
L'élément select et sa fonction de liste déroulante sont difficiles à styliser.
[attributs de style pour l'élément select][1] de Chris Heilmann confirme ce que Ryan Dohery a dit dans un commentaire de la première réponse :
"L'élément select fait partie du système d'exploitation. système d'exploitation, et non du navigateur chrome. Par conséquent, il est très très peu fiable, et il n'est pas forcément judicieux d'essayer quand même. de toute façon. " ;
[1] : http://archivist.incutio.com/viewlist/css-discuss/39858
Les balises <select>
peuvent être stylisées par le biais de CSS, comme n'importe quel autre élément HTML sur une page HTML rendue dans un navigateur. Voici un exemple (excessivement simple) qui positionnera un élément select sur la page et rendra le texte des options en bleu.
Exemple de fichier HTML (selectExample.html) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Exemple de fichier CSS (selectExample.css) :
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
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>