Taille du texte pour le menu déroulant/sélection de l'entrée ne fonctionne pas dans Safari

Question

Première question ...

Je vais avoir du mal à obtenir du QUELQUE le menu déroulant/Sélection d'entrée de apparaître avec la taille de la police 18 dans Safari.

Fonctionne bien dans FF.

code:

<form class="form"> 
<select name="make"> 
<option value="0"> All</option> 
</select> 
</form> 

Css:

.form input{ 
font-size:18px; 
margin-bottom:0px; 
} 

Toutes les idées? Peut voir en direct à [http://www.motolistr.com][1]

Best, Nick

EDIT 1: Merci pour la réponse rapide. J'ai ajouté un style à la sélection elle-même pour éviter toute confusion. J'ai essayé;

<select name='make' style='font-size: 18pt;'> 
</select> 

Et

<select name='make' style='font-size: 18px;'> 
</select> 

Et

<select name='make' style='font-size: 1.3em;'> 
</select> 

Je travaille toujours pas SAFARI ... Encore une fois FF fonctionne très bien avec tous les 3.

Best, Nick

Answer 1

Le Techniquement, ce n'est pas une étiquette input. Essayez d'assigner une classe à votre sélection et définissez le style pour la classe.

EDIT: Il s'avère que les sélections de style Aqua ne disposent que de trois tailles de police différentes. Si vous devez définir une taille de police exacte, vous pouvez désactiver Aqua en attribuant à l'élément une couleur d'arrière-plan, puis en définir la taille. Pour info, il semble que 20px fonctionne sans définir l'arrière-plan de sorte qu'il doit être dimensionné jusqu'à la prochaine taille Aqua prise en charge.

Référence: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Testez la page avec différents styles au http://particletree.com/examples/safari3/drop.html.

<select name='make' class='big-input'> 
</select> 


.big-input 
{ 
    background: #fff; // turns off Aqua 
    font-size: 18pt; // assuming you meant 18pt, not 18px 
    margin-bottom: 0px; 
} 

Answer 2

Il apparaît que les contrôles sélectionnés ne sont pas stylisables dans Safari; Il utilise toujours ses propres routines de dessin de widget OS X pour les afficher. Jusqu'à récemment, c'était la norme: les navigateurs utilisaient généralement des widgets fournis par le système d'exploitation pour les champs de formulaire. CSS2 ne dit pas vraiment comment les styles devraient s'appliquer aux champs de formulaire (le cas échéant).

Certains navigateurs appliquent aujourd'hui le style de police de select aux options (IE7, Opera); certains permettent la sur la page de sélection et les options de pop-up à différentes style (Mozilla, Chrome), de sorte que le mieux que vous pouvez faire pour la cohérence est:

.form select, .form option { 
    font: Whatever 18px; 
} 

Mais si vous avez absolument besoin d'une liste déroulante stylable Dans Safari, vous devrez écrire votre propre ersatz-select clunky en JavaScript. (Ou voyez l'un des nombreux scripts existants et plugins framework qui font cela.)

Answer 3

chose drôle si: Si vous changez les background - ou border -properties sur votre select Safari tout d'un coup appliquent également votre font-size.

Answer 4

La définition de la hauteur de ligne: 100% contraint la hauteur de la zone de sélection pour une apparence plus cohérente, mais n'affecte toujours pas la taille de la police.

Answer 5

Tout d'abord ce

.form input{ 
font-size:18px; 
margin-bottom:0px; 
} 

ne fonctionnera pas parce que vous n'êtes pas le style de l'élément que vous sélectionnez le style des éléments d'entrée. Essayez ceci et cela fonctionnera très probablement.

.form select { 
font-size:18px; 
margin-bottom:0px; 
} 

Answer 6

au moins dans Safari 5.1 (je n'ai pas 3 en cours d'exécution plus) vous pouvez désactiver le style par défaut avec:

select{-webkit-appearance: none} 

Ensuite, il sera conforme à votre taille de police.

Answer 7

J'ai trouvé un moyen de changer la taille de la police d'un élément de sélection dans Safari grâce à l'utilisation de pourcentages.
Votre code devient alors:

<select name='make' style='font-size: 120%;'></select> 

Pour une taille de police de 13px (que j'ai trouvé très attrayante).

Cela a été testé dans Safari 5.1.3

Answer 8

Pour un style de sélection dans Safari vous devez d'abord désactiver le style os:

select { 
    -webkit-appearance: none; 
} 

Answer 9

Vous pouvez cibler Safari tag select en faisant cela :

select { 
    width: 224px; 
    line-height: 1.8; (This can be in px too) 
} 

Answer 10

J'ai trouvé une manière que safari reprendra sur la taille de police ... tout ce que vous devez faire est de définir un ou, comme le suivant.

-webkit-apparence: aucune; vous fera perdre tous les attributs de safari, comme les flèches ... ci-dessous vous pouvez augmenter la taille sans perdre cela.

fonctionnera dans Safari

<select style=" font-size: 3em; border: black;"> 
    <option>TEXT</option> 
</select> 

ne travai dans Safari

<select style=" font-size: 3em;"> 
    <option>TEXT</option> 
</select> 

Answer 11

essayer cette

<style> 
select { border:0; color:#000000; background:transparent; 
font-size:20px; font-weight:bold; padding:2px 10px; width:378px; 
*width:350px; *background:#FFFFFF; -webkit-appearance: none; } 

#mainselection { overflow:hidden; width:350px; 
-moz-border-radius: 9px 9px 9px 9px; 
-webkit-border-radius: 9px 9px 9px 9px; 
border-radius: 9px 9px 9px 9px; 
box-shadow: 1px 1px 11px #330033; 
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF; 
} 
</style>