Le style CSS pour la valeur d'option dans la liste déroulante html ne fonctionne pas sur Chrome et Safari, fonctionne uniquement sur Firefox et IE.
certains codes sont sortis ci-dessous:
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:Ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="project">Project</option>
Le style color
fonctionne très bien dans les éléments <option>
sous Windows 7 avec les versions actuelles de Chrome, Safari, Firefox, IE et Opera, ainsi que sur Mac avec Firefox; mais semble être un no-op sur Mac avec Chrome et Safari. Ça ressemble à un bug pour moi.
La réponse courte - vous ne pouvez pas faire cela dans les navigateurs Webkit. C'est à dire. à propos de padding
jeter un oeil ici
Pour résoudre votre problème, vous pouvez changer votre <select>
en une liste <ul>
et styliser ses éléments '<li>
. Cela fonctionnera dans tous les navigateurs garantis.
S'il vous plaît essayez d'utiliser cette
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
l'essayer
<!DOCTYPE html>
<html>
<body>
<form action="form_action.asp">
Select your favorite car:
<select name="carlist">
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit- appearance:button;text-overflow:Ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="volvo">Volvo XC90</option>
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:Ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="saab">Saab 95</option>
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:Ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="mercedes">Mercedes SLK</option>
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:Ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="audi">Audi TT</option>
</select>
<input type="submit" value="Submit" />
</form>
<p>Choose a car, and click the "Submit" button to send input to the server.</p>
</body>
</html>
comme on peut le voir dans: http://www.w3schools.com/tags/att_option_value.asp