9
votes

Pourquoi utiliser `-webkit-apparence: aucune» sur une option de sélection dans OSX rend le texte disparaître?

Pour obtenir le style, je veux sur chrome dans OS X, je dois utiliser le -webkit-apparence: aucun; code> attribut.

voir et Cette réponse . P>

Le problème est, maintenant lorsque je sélectionne une réponse, cela ne s'affiche pas. Le champ reste juste en blanc. P>

Voici comment il ressemble sans cet attribut: p>

sans attribut p>

Voici comment il ressemble à l'attribut: p>

 avec attribut p>

Pour ce que ça vaut la peine, voici comment je crée ce menu SELECT - avec formulaire simple: p>

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


11 commentaires

Soit Chrome sur Linux fonctionne différemment, ou vous n'avez pas fourni à tous les CSS qui sont appliqués.


Ajouté le CSS .... mon mauvais.


Peut-être que vous pouvez essayer de spécifier les couleurs explicitement (à la fois sur l'option et tyhe et TYHE ), 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 à tester.


Pour un projet énorme avec de nombreux formes, j'ai choisi d'utiliser Formulaires de Isellsoap . Tout ce dont vous avez besoin pour une conception cohérente de CrossBrowser est là. Même sans l'utiliser, vous pouvez apprendre beaucoup des choix qu'ils ont faits.


Merci pour la pointe @felipéals. Cela semble être trop exclu dans ce cas. Je veux juste une simple règle CSS qui fonctionnera pour chrome sur OS X.


J'ai un "problème" (c'est plutôt une conséquence de -webkit-apparence: Aucun et il est obligatoire si vous souhaitez styler des éléments de formulaire avec le moins JS possible) sur chrome / Vista: le manque de flèche droite. Bibliothèque de bibliothèque précédemment liée à cela et de nombreux autres problèmes sur Chrome, principalement Firefox, Opera, c'est-à-dire, etc. Il semble que vous rencontrez ce problème sur OS X aussi, mais aussi le manque d'option ou ce dernier étant écrit en blanc sur blanc. Je pourrais tester celui-ci demain au travail si vous avez un violon (pas sûr s'il s'agit de chrome ou d'une autre partie de votre CSS ...)


Le manque de flèche droite ne me dérange pas en ce moment. Comme il se trouve en ce moment, je ne peux pas lire la tombée de la liste déroulante. Il suffit de pouvoir le lire - avec elle étant la même hauteur que mes autres éléments, seraient un coup de pouce majeur.


Je suppose que vous avez essayé d'autres valeurs pour -webkit-apparence , pour voir comment ils sortent?


Oui ... aucun d'entre eux n'est satisfaisant.


@marcamillion Avez-vous un exemple où nous pouvons voir cela en action (lien vers votre site Web?)


Fiddle: JSFIDDLE.net/bpygv/1 . Voyez-vous le problème là-bas? Regarde bien pour moi.


5 Réponses :


5
votes

Test en chrome pour OSX (10.8.2) et cela fonctionne bien: xxx

Vous avez une option vide comme première. C'est pourquoi vous obtenez la sélection vide.


2 commentaires

Non, le problème n'est pas que j'ai une option vide. La question est qu'une fois que j'ai sélectionné une option valide - dans la question que j'ai choisie États-Unis - mais cela montre toujours comme vide une fois que États-Unis est sélectionné. Donc, cette grande boîte blanche / vierge est après avoir sélectionné États-Unis .


Je ne peux pas reproduire cela sur OSX.



2
votes

Le problème n'est pas reproductible si je démarre une page HTML fraîche (sur Mac Chrome et Safari). Pour moi, cela ressemble à un problème de règlement CSS. Est couleur: #fff; style défini dans l'une des classes utilisées par Sélectionnez ? Vous voudrez peut-être essayer d'inspecter l'élément ou OPTION de Chrome / Safari pour voir s'il existe des classes appliquant ce style.


0 commentaires

9
votes

J'ai eu ce problème et il s'est avéré être la propriété en hauteur la cause. XXX

Vérifiez ce violon http://jsfiddle.net/bpygv/2/


2 commentaires

Êtes-vous sûr que la propriété hauteur et non la combinaison d'une hauteur mélangée avec un Rembourrage qui dépasserait la hauteur quand même?


Continuez à tomber dans le même piège avec celui-ci en utilisant Bootstrap. C'est la bonne réponse, @nness et aucun rembourrage ne contribue pas à la question. Réglage .form-contrôle à Hauteur: auto ou Hauteur: auto! IMPORTANT le montrera correctement avec ce qu'il contient.



0
votes

Le rembourrage appuie le contenu de la sélection de la vue Sélectionner, essayez de diminuer le remplissage dans l'inspecteur Web de Chrome pour le faire apparaître à nouveau.

Une solution peut être de régler dur le rembourrage et la hauteur, c'est-à-dire. P >

-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #aaa;
padding: 20px;
font: 12px/12px Arial;
height: 57px;


0 commentaires

0
votes

Pour moi, je dois définir ceci: xxx


0 commentaires