it-swarm.com.de

Schriftfamilie wird nicht an die Formulareingabefelder vererbt

Ersetzen die Eingabeelemente für das HTML-Formular wie das Eingabetextfeld oder das Auswahlfeld die Eigenschaft font-family nicht automatisch vom Hauptteil?

body {
 font-family:'Lucida Casual', 'Comic Sans MS';
}

Die obige Schrift wird nicht im untenstehenden Formulareingabefeld verwendet:

<form> 
   <div>
        <label for="name">Name</label>  
        <input id="name" name="name" type="text" />  

   <div>
</form>

Bitte schau nach http://jsfiddle.net/3fkNJ/

Ist es üblich, dass wir die Schriftfamilie für die Eingabefelder neu definieren müssen, oder mache ich etwas falsch?

36
sunjie

Ja, Sie müssen die Variable font im Tag input einfügen.

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

Sie können auch inherit verwenden, um die font für form-Felder festzulegen.

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

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT - Erklärung hinzugefügt

Die meisten Browser rendern Text in form-Elementen als das des Betriebssystems des Benutzers. Dies ist, so wie ich es verstehe, ein allgemeines Erscheinungsbild für den Benutzer. Es kann jedoch alles mit dem obigen Code überschrieben werden.

44
Jason Gennaro

der Code ist nicht falsch. Dies ist üblich, da das Eingabefeld standardmäßig die Einstellungen für das OS-Design übernimmt. Dies wurde bereits in stackoverflow erläutert. Schauen Sie sich den Link unten für weitere Details an.

Warum nimmt <textarea> und <textfield> keine Schriftfamilie und Schriftgröße aus dem Textkörper an?

4
z0mBi3

Ändern Sie das CSS-Körperattribut in 

body *{font-family:'Lucida Casual', 'Comic Sans MS';}

Das * zwingt jedes untergeordnete Element, den angegebenen Wert innerhalb der von Ihnen geschriebenen CSS-Regel zu erben, weil die CSS-Regeln über die Spezifikation hinausgehen. Sehen Sie die Geige hier

Dies ist praktisch, wenn Sie möchten, dass jedes Element auf Ihrer Seite den gleichen Wert für die Schriftfamilie hat. Dies ist nicht so praktisch, wenn Ihre Formulare einen anderen Wert haben sollen. 

Smashing Magazine hat einen Artikel der dir weiterhelfen kann.

Ich hoffe, es hilft. 

1
Ryan

es hat für mich funktioniert:

tags-input *, tags-input *:before, tags-input *:after {
  font-family: "IRANSans" !important;
}

tags-input .tags .input {
  padding-right: 5px;
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}

tags-input .tags .tag-item {
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}
0
mehdi