<input> non eredita il carattere da <body>

102

Ho campi di input ed etichetta:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

e CSS:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Quando il codice si apre in Firefox, i caratteri non sono gli stessi. Firebug mostra che entrambi "dovrebbero" ereditare e quando guardo il computer mostra che l'etichetta usa Verdana. Tuttavia, l'input mostra che utilizza "MS Shell Dlg".

Qualcuno può spiegare cosa sta succedendo e perché non sembra obbedire alle normali regole CSS?

css

— Judy R
fonte

è molto triste che non lo facciano. Immagino che il W3C avesse deciso che sarebbe stato meglio lasciarli con lo stile predefinito del sistema piuttosto che forzare il loro stile di broswer su di loro

— vsync

125

Non eredita di default ma puoi impostarlo per ereditare con css

input, select, textarea, button{font-family:inherit;}

demo: http://jsfiddle.net/gaby/pEedc/1/

— Gabriele Petrioli
fonte

proprietà del carattere eredita automaticamente se non è menzionata, vedere qui: developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho, questo è vero per tutti gli elementi oltre agli elementi del modulo, che ereditano dallo stile del sistema corrente in modo da mantenere un aspetto familiare all'utente ( per impostazione predefinita ), ma sono manualmente sovrascrivibili.

— Gabriele Petrioli

1

Sbagliato o no, quello che Firebug mi stava mostrando era molto confuso: dimensione del carattere 12, ma calcolato che diventava ancora 13.3333. Dopo aver impostato la dimensione del carattere per ereditare in modo analogo alla risposta di Gaby, il mio problema è stato risolto: O

— Jeroen

@Gaby È sempre così bello che i designer pensino a noi sviluppatori ...;)

— AGuyCalledGerald

Inoltre se metti l' inputinterno label, il labeltag non eredita il css predefinito

— AmerllicA

16

Gli elementi del modulo (input / textarea / ecc.) Non ereditano le informazioni sui caratteri. Dovrai impostare la famiglia di caratteri su questi elementi.

— John Green
fonte

@ jhon wat mai hai detto che potrebbe essere vero, c'è qualche documento standard / valido in merito ??

— diEcho

gli elementi del carattere inoltre non ereditano il colore, lo sfondo e così via. In realtà, gli elementi dei caratteri sono la cosa più inaffidabile nell'intero html / css! Non è possibile specificare una larghezza per una casella di input e la garanzia sarà la stessa su tutti i browser!

— Ionuț Staicu

Intendo elementi di forma. Ancora assonnato :)

— Ionuț Staicu

@diEcho - Onestamente, ho fatto una ricerca nelle specifiche e non lo vedo chiamato da nessuna parte. Guardando "Correlato", SO mi sta dando un collegamento alla domanda duplicato: stackoverflow.com/questions/2874813 (che fornisce la mia risposta, sebbene anche senza collegamenti alle specifiche). Il foglio di stile predefinito in Chrome elenca il carattere come "-webkit-small-control;", il che significa che sta già sovrascrivendo il corpo, quindi è più specifico di qualsiasi cosa impostata sul corpo. Lo stesso vale per gli elementi TD, se non sbaglio. Quindi non so cosa dire se non "è proprio così". :)

— John Green

5

Tre anni più tardi, sto trovando strani <input>elementi di tipi reset, submite buttonnon ereditano font-familyin Chrome o Safari. Ho scoperto che nemmeno loro avrebbero ricevuto imbottitura.

Ma quando faccio confusione con determinate proprietà, come background, bordero questa strana appearanceproprietà, allora font-familye paddingho effetto, ma l'aspetto nativo del pulsante viene perso, il che non è un problema se stai completamente ridisegnando i pulsanti.

Se vuoi un pulsante dall'aspetto nativo, con ereditato font-family, usa l' <button>elemento invece di <input>.

Vedi Codepen .

— Stoutie
fonte

1

Ho avuto lo stesso problema. Quello che ha funzionato per me è stato aggiungere lo stile direttamente all'elemento di input nell'html. Sto codificando in React fyi.

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

— rpd1297
fonte