dimensioni del testo per menu a tendina/selezione ingresso non funziona in Safari

Question

Prima domanda ...

Sto avendo difficoltà a raggiungere qualsiasi del menu a discesa/Selezione ingresso di apparire con la dimensione del carattere 18 in Safari.

Funziona bene in FF.

Codice:

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

Css:

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

Tutte le idee? Può vedere dal vivo al [http://www.motolistr.com][1]

migliore, Nick

EDIT 1: Grazie per la risposta rapida. Ho aggiunto uno stile alla selezione stessa per evitare confusione. Provai;

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

E

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

E

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

Ancora non funziona in Safari ... Ancora una volta FF funziona bene con tutti e 3.

migliore, Nick

Answer 1

Il select tecnicamente non è un tag input. Prova ad assegnare una classe alla tua selezione e imposta lo stile per la classe.

MODIFICA: Si è scoperto che lo stile di Aqua seleziona solo tre dimensioni di carattere differenti disponibili. Se è necessario impostare una dimensione esatta del carattere, è possibile disattivare Aqua dando all'elemento un colore di sfondo, quindi impostare la dimensione. Cordiali saluti, sembra che 20px funzioni senza impostare lo sfondo, quindi deve essere ridimensionato alla successiva dimensione Aqua supportata.

Riferimento: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Prova la pagina con vari stili a 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

I controlli di selezione dell'app tra utenti non sono stylable in Safari; usa sempre le proprie routine di disegno del widget in stile OS X per visualizzarle. Fino a poco tempo fa, questa era la norma: i browser usavano in genere widget semplici forniti dal sistema operativo per i campi modulo. CSS2 in realtà non dice come gli stili dovrebbero applicarsi ai campi modulo (se non del tutto).

Alcuni browser oggi applicano lo stile del carattere di selezione alle opzioni (IE7, Opera); alcuni permettono l'on-page selezionare e le opzioni di pop-up per avere uno stile diverso (Mozilla, Chrome), quindi la cosa migliore che si può fare per la coerenza è:

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

Ma se assolutamente bisogno di un stylable discesa in Safari dovrai scrivere il tuo ersatz clunky-selezionare in JavaScript. (Oppure vedi uno dei tanti script esistenti e plug-in di framework che fanno questo.)

Answer 3

cosa divertente però: se si modificano le background - o border -properties sul tuo select Safari sarà tutto ad un tratto si applicano anche la vostra font-size.

Answer 4

Impostazione dell'altezza della riga: 100% vincola l'altezza della casella di selezione per un aspetto più coerente, ma non influenza ancora le dimensioni effettive del carattere.

Answer 5

Prima di tutto questo

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

non funziona perché non si è Styling l'elemento di selezione che si sta styling elementi di input. Prova questo e molto probabilmente funzionerà.

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

Answer 6

Almeno in Safari 5.1 (non ho 3 in esecuzione più) è possibile disattivare lo stile di default con:

select{-webkit-appearance: none} 

Allora sarà conforme al dimensionamento dei caratteri.

Answer 7

Ho trovato un modo per modificare la dimensione del carattere di un elemento selezionato in Safari tramite l'utilizzo di percentuali.
il codice diventa quindi:

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

Per una dimensione di carattere 13px (che ho trovato molto interessante).

Questo viene testato in Safari 5.1.3

Answer 8

Per stile di un selezionato in Safari è necessario prima di spegnere lo styling os:

select { 
    -webkit-appearance: none; 
} 

Answer 9

È possibile indirizzare Safari select tag in questo modo :

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

Answer 10

ho capito un modo che Safari salire su font-size ... tutto quello che dovete fare è impostare un confine col o, come il seguente.

-webkit-aspetto: nessuno; ti farà perdere tutti gli attributi del safari, come le frecce ... sotto puoi aumentare le dimensioni senza perdere questo.

lavorerà in Safari

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

non funziona in Safari

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

Answer 11

provare questo

<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>