web-dev-qa-db-fra.com

La valeur de l'option de style dans le menu déroulant de sélection html ne fonctionne pas sur Chrome et Safari

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>
htmlcsshtml-select
8
user1483059

Le style color fonctionne très bien dans les éléments &lt;option&gt; 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.

16
user2183078

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.

7
Zoltan Toth

S'il vous plaît essayez d'utiliser cette

select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
1
subindas pm

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

0
Willian Yamashita