Pour obtenir le style, je veux sur chrome dans OS X, je dois utiliser le voir 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> Voici comment il ressemble à l'attribut: p> Pour ce que ça vaut la peine, voici comment je crée ce menu SELECT - avec formulaire simple: p> -webkit-apparence: aucun; code> attribut.
p>
p>
form.simple_form select {
padding: 20px;
-webkit-appearance: none;
}
5 Réponses :
Test en chrome pour OSX (10.8.2) et cela fonctionne bien: Vous avez une option vide comme première. C'est pourquoi vous obtenez la sélection vide. p> p>
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 code> - mais cela montre toujours comme vide une fois que
États-Unis code> est sélectionné. Donc, cette grande boîte blanche / vierge est après avoir sélectionné
États-Unis code>.
Je ne peux pas reproduire cela sur OSX.
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; code> style défini dans l'une des classes utilisées par
Sélectionnez code>? Vous voudrez peut-être essayer d'inspecter l'élément code> ou
OPTION CODE> de Chrome / Safari pour voir s'il existe des classes appliquant ce style. P>
J'ai eu ce problème et il s'est avéré être la propriété en hauteur la cause. Vérifiez ce violon
http://jsfiddle.net/bpygv/2/ p> p>
Êtes-vous sûr que la propriété hauteur code> et non la combinaison d'une hauteur code> mélangée avec un
Rembourrage code> qui dépasserait la hauteur
code> 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 code> à
Hauteur: auto code> ou
Hauteur: auto! IMPORTANT CODE> le montrera correctement avec ce qu'il contient.
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;
Pour moi, je dois définir ceci:
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 code> 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 code> 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 code>, 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.