Pourquoi en utilisant "- webkit-appearance: none " sur une option sélectionner dans OSX faire disparaître le texte?

Afin d'obtenir le style que je veux sur Chrome OS X, je dois utiliser le -webkit-appearance: none; attribut.

La question est, maintenant, quand je sélectionne une réponse, il n'apparaît pas. Le champ reste vide.

C'est à quoi il ressemble sans que l'attribut:

Pourquoi en utilisant

C'est à quoi il ressemble AVEC l'attribut:

Pourquoi en utilisant

Pour ce que ça vaut, c'est la façon dont je suis la création de ce, sélectionnez menu - avec la Forme Simple:

<%= f.input_field :country_id, collection: Piggybak::Country.send(type), class: "required" %>

C'est le code HTML qu'il génère:

<select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]"><option value=""></option>
<option value="231" selected="selected">United States</option></select>

Comment puis-je résoudre ce problème?

Edit 1

C'est le CSS:

form.simple_form select {
    padding: 20px;
    -webkit-appearance: none;
}

Google Chrome sur Linux fonctionne différemment, ou vous n'avez pas fourni tous le CSS qui s'applique.
Ajouté le CSS....mon mauvais.
Peut-être que vous pouvez essayer de préciser les couleurs explicitement (à la fois sur le select et notre option), ainsi que l'opacité et tout ce qui peut masquer le texte. Sinon, je ne peux pas vous aider, car je n'ai pas de Mac pour tester.
Pour un projet énorme avec beaucoup de formes, j'ai choisi d'utiliser formulaires.css de isellsoap. Tout ce dont vous avez besoin pour compatible crossbrowser design est là. Même sans l'utiliser, vous pouvez apprendre beaucoup de choix qu'il fait.
Merci pour l'astuce @FelipeAls. Qui semble exagéré dans ce cas. Je veux juste une simple règle CSS qui va travailler pour google Chrome sur mac OS X.

OriginalL'auteur marcamillion | 2013-05-19

6

J'ai eu ce problème et il s'est avéré être la propriété height de la cause.
```
select {
    padding: 20px;
    height: 20px; /* suddenly invisible text! */
    -webkit-appearance: none;
}
```
Découvrez ce violon
http://jsfiddle.net/bpYGv/2/

Êtes-vous sûr de son la height propriété, et non pas la combinaison d'un height mélangé avec un padding qui dépasserait le height de toute façon?
Garder de tomber dans le même piège avec celui-ci à l'aide de Bootstrap. C'est la bonne réponse, @nness et pas de rembourrage ne contribue pas à la question. Réglage .form-control à height: auto ou height: auto !important montrera de nouveau correctement avec rembourrage qui vient avec.

OriginalL'auteur Jonathan Azulay

Test en Chrome pour OSX (10.8.2) et cela fonctionne très bien:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Testing Select</title>
  <style>
    form.simple_form select {
      padding: 20px;
      -webkit-appearance: none;
    }
  </style>
</head>
<body>
  <form class="simple_form">
    <select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]">
      <option value="">test</option>
      <option value="231" selected="selected">United States</option>
    </select>
  </form>
</body>
</html>

Vous avez une option vide que le premier. C'est pourquoi vous obtenez le vide sélectionner.

Non, le problème n'est pas que j'ai une option vide. Le problème est qu'une fois que je sélectionne une option valable - dans la question, j'ai choisi United States - mais il montre encore vierges une fois United States est sélectionné. Alors que big white/case vide est APRÈS que j'ai sélectionné United States.
Je ne peux pas reproduire ce sur OSX.

OriginalL'auteur Kerim Incedayi

2

Le problème n'est pas reproductible si je commence une nouvelle page HTML (sur Mac Chrome et Safari). Pour moi, ce son comme un cliquetis de règles CSS question. Est color: #fff; style défini dans l'une des classes utilisées par select? Vous pourriez essayer de l'inspection de l' select ou option élément de Chrome/Safari pour voir s'il y a des classes de l'application de ce style.

OriginalL'auteur catcyborg
0

Le rembourrage est en poussant le contenu de la sélection hors de vue, essayez de diminuer le rembourrage dans le Chrome web de l'inspecteur pour la faire apparaître de nouveau.

Une solution pourrait être difficile de définir le rembourrage ET la hauteur, c'est à dire.
```
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #aaa;
padding: 20px;
font: 12px/12px Arial;
height: 57px;
```
Mais bas pixels de lettres ont toujours tendance à tomber dans les différents navigateurs, un 53px hauteur doit être suffisante (2*frontière + 2*rembourrage + 1*la hauteur de la ligne), mais Chrome 34 besoins 55px, IE11 56px et FF28 57px pour afficher complètement lettres.

Voir mon violon à http://jsfiddle.net/lmeurs/tLkAR/.

Voir aussi Formaliser à "enseigner à vos formulaires de certaines façons de faire" et Sélectionnez pour "styleable de sélectionner des éléments".

OriginalL'auteur lmeurs
0

une autre solution pourrait être de définir la hauteur de la ligne pour sélectionner la zone:
```
select {
   line-height: 20px;
   -webkit-appearance: none;
   -moz-
}
```
OriginalL'auteur Mohsen Beiranvand

Vous devez vous connecter pour publier un commentaire.