Style valeur de l'option à sélectionner déroulant html fonctionne pas sur Chrome & Safari

Le style css pour la valeur de l'option dans le code html dans la liste déroulante fonctionne pas sur chrome et safari , de ne travailler que sur Firefox et IE.

certains de code 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>

préciser un peu plus de code et de préciser le problème Que voulez-vous dire par "Ne fonctionne pas" ?
le consulter à l'url ci-dessous sur firefox et sur chrome et de voir la différence: 64.202.124.112/~cedro/fr/EFFICACITÉ ÉNERGÉTIQUE/Intérieur-Éclairage/... (regarde sur le menu déroulant à droite : les projets de navigation)
un espace blanc à la place de hite-espace, mais ne fonctionne pas

OriginalL'auteur | 2012-09-06

16

color style fonctionne très bien dans <option> éléments sur Windows 7 avec les dernières versions de google Chrome, Safari, Firefox, IE et Opera, ainsi que sur Mac avec Firefox; mais il semble être un no-op sur Mac avec Chrome et Safari. Semble être un bug pour moi.

OriginalL'auteur user2183078
6

La réponse courte - vous ne pouvez pas le faire dans les navigateurs basés sur Webkit. I. e. sur padding prendre un coup d'oeil ici

À surmonter votre problème, vous pouvez modifier votre <select> à une liste <ul> et le style de son " <li> éléments. Qui fonctionne dans tous les navigateurs garanti.

Je vous remercie.c'est une idée...
Et bien... c'est une idée... mais comment faire pour que <li>s pour afficher et masquer sur <ul> clique sur... la simulation en effet, le <select> comportements.
vous pouvez utiliser un minimum de JS/jQuery pour que
bon morceau de conseils. C'est ce que j'ai finalement fait et je pense qu'il a eu un joli 🙂
C'est une bonne méthode, mais vous perdez la possibilité de sélectionner en tapant et tabing entre les champs.

OriginalL'auteur Zoltan Toth

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 nous pouvons le voir dans:
http://www.w3schools.com/tags/att_option_value.asp

Je vous remercie. sur le Navigateur google Chrome, vient de prendre l'arrière-plan css , pas de la question de la frontière.
Pas de chance sur OSX avec google Chrome.

OriginalL'auteur Willian Yamashita

0

S'il vous plaît essayez d'utiliser cette
```
select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
```
Cela permet de masquer la flèche de la liste déroulante, faire des GUI non-user-friendly...

OriginalL'auteur subindas pm
-1

J'ai été en mesure de reproduire cela en Chrome sur jsfiddle. Vous pouvez appliquer des styles à la select, comme ceci: http://jsfiddle.net/aaronmacy/3uv8D/

oui, je sais, mais la valeur de l'option ne peut pas affectée par le css!!!
Je suis peut-être un malentendu. J'ai juste ajouté un exemple de ma réponse. Est-ce que vous voulez accomplir?
Thank u pour votre relecture , je comprends votre exemple, mon problème est sur l'option tag dans la balise select

OriginalL'auteur amacy

Vous devez vous connecter pour publier un commentaire.