# CSS Schriftfarbe in Formular bestimmen?



## Nusskati (20. November 2016)

Hallo, ich habe ein Formular, welches ich gerne auf meiner Internetseite (Wordpress) einbinden möchte. Leider wird die Schrift in grau dargestellt, was sehr schlecht zu sehen ist. Ich möchte gerne die Beschriftungen wie Name, Email etc. in schwarz färben. Leider hat bisher alles, was ich probiert habe, nicht geklappt. Dies ist der Code: 


```
<form id="nl2go--form" accept-charset="utf-8" action="https://app.newsletter2go.com/de/recipients/index/subscribe/" method="post">
<table border="0">
<tbody>
<tr>
<td style="padding-right: 8px;" align="left">E-Mail*</td>
<td><input id="nl2go--mail" style="background: #f4f4f4; border: 1px solid #000000; padding: 2px; width: 250px;" name="nl2go--mail" type="text" /></td>
</tr>
<tr>
<td style="color: #0000ff;" align="left">Vorname</td>
<td><input id="nl2go--firstname" style="background: #f4f4f4; border: 1px solid #000000; padding: 2px; width: 250px;" name="nl2go--firstname" type="text" /></td>
</tr>
<tr>
<td style="padding-right: 8px;" align="left">Nachname</td>
<td><input id="nl2go--lastname" style="background: #f4f4f4; border: 1px solid #000000; padding: 2px; width: 250px;" name="nl2go--lastname" type="text" /></td>
</tr>
<tr>
<td>Geschlecht</td>
<td><input name="nl2go--gender" type="radio" value="m" />männlich <input name="nl2go--gender" type="radio" value="f" />weiblich</td>
</tr>
<tr>
<td></td>
<td align="center"><input id="nl2go--submit" style="cursor: pointer; border: 1px solid #34740e; border-radius: 3px 3px 3px 3px; font-weight: bold; text-align: center; color: #ffffff; background-color: #4ba614; background-image: -moz-linear-gradient(center top , #4ba614, #008c00); padding: 4px 8px; text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.3); font-size: 100%; margin-top: 8px; width: 100%;" name="nl2go--submit" type="submit" value="Zum Newsletter anmelden" />
<input id="nl2go--key" name="nl2go--key" type="hidden" value="75cc7fe62e75be555f55b1b658cc76691eaf278eff7054f9812eb446586fc464$12963" /></td>
</tr>
<tr>
<td></td>
<td align="center"><input id="nl2go--unsubscribe" style="cursor: pointer; border: 1px solid #d7dada; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 2px 4px; text-shadow: 0px 0px 0 rgba(0,0,0,0.3); font-weight: normal; text-align: center; color: #333333; background-color: #f4f5f5; background-image: linear-gradient(top, #f4f5f5, #dfdddd); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd); margin-top: 8px; width: 100%;" name="nl2go--unsubscribe" type="submit" value="Vom Newsletter abmelden" /></td>
</tr>
</tbody>
</table>
</form>
```

Über eine unkomplizierte Hilfe würde ich mich freuen.


----------



## MrMurphy (21. November 2016)

Hallo

In deinem Quellcode finde ich keine graue Schrift. Nur schwarze, blaue und weiße.

Gruss

MrMurphy


----------



## SpiceLab (21. November 2016)

Nusskati hat gesagt.:


> ich habe ein Formular, welches ich gerne auf meiner Internetseite (Wordpress) einbinden möchte. Leider wird die Schrift in grau dargestellt, was sehr schlecht zu sehen ist. Ich möchte gerne die Beschriftungen wie Name, Email etc. in schwarz färben. Leider hat bisher alles, was ich probiert habe, nicht geklappt.


Für eine schwarze Schriftfarbe bedarf es eigentlich keiner expliziten CSS-Formatierung, da sie normalerweise standardmäßig / voreingestellt in einem HTML-Dokument gilt.

Folglich wird Dein verwendetes Wordpress-Theme ein CSS mitbringen, das die *color*-Regel (mit grauer Farbe) auf die *<td>*-Elemente anwendet, in denen sich die Beschriftungen befinden.

Inspiziere also die Seite, respektive das darin eingebundene Formular, mit dem integrierten Entwicklerwerkzeug Deines Browsers, um diese Regel im WP-Theme-CSS zu lokalisieren, und entsprechend zu korrigieren.

Falls Du das CSS nicht "anfassen", seinen Originalzustand nicht verändern willst, binde im HTML-Code nach dem WP-Theme-CSS Dein individuelles Stylesheet ein, damit es in der Kaskade (https://wiki.selfhtml.org/wiki/CSS/Kaskade) die Formatierung überschreibt:

```
<link rel="stylesheet" href="wp-theme.css" /><!-- WP-Theme-CSS -->
<link rel="stylesheet" href="customized.css" /><!-- Dein CSS -->
```


```
/* Inhalt von customized.css */
 td {color:#000;}
```
Achte aber darauf, wie der Selektor im WP-Theme-CSS tatsächlich (im Wortlaut) lautet, um seine Spezifität (https://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifit.C3.A4t_der_Regels.C3.A4tze) zu übernehmen.

Beispiel, was passiert, wenn die Spezifität eines Selektors nicht ausreicht, um eine zuvor definierte CSS-Regel zu überschreiben:

```
<div class="form">
  <!-- Beispiel: Dein Formular befindet sich in einem Element mit der Klasse .form -->
  <form><!-- Dein Formular  --></form>
</div>
```


```
.form td {color:lightgray} /* CSS-Regel im WP-Theme-CSS */
td {color:#000} /* Deine CSS-Regel */
```
Ergebnis: https://jsfiddle.net/spicelab/r0rp7yq5/

Alternatives Beispiel zum gleichlautenden Selektor, das der *color*-Deklaration *!important* (https://wiki.selfhtml.org/wiki/CSS/Kaskade#Wichtige_Eigenschaften_.28.21important.29) anhängt, und die vorherige Regel erfolgreich überschreibt: https://jsfiddle.net/spicelab/swtm77bb/

Was es aber beim Einsatz von *!important* zu beachten gibt, kannst Du hier nachlesen, denn ich habe diese Methode hier lediglich zu Demonstrationszwecken gewählt:

https://developer.mozilla.org/de/docs/Web/CSS/Spezifität#Die_!important_Ausnahme


[edit]Tipp-Ex[/edit]​


----------

