CSS Schriftfarbe in Formular bestimmen?

N

Nusskati

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

HTML: 
<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. :)
 
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.
Zum Vergrößern anklicken....
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:
HTML: 
<link rel="stylesheet" href="wp-theme.css" /><!-- WP-Theme-CSS -->
<link rel="stylesheet" href="customized.css" /><!-- Dein CSS -->
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:
HTML: 
<div class="form">
  <!-- Beispiel: Dein Formular befindet sich in einem Element mit der Klasse .form -->
  <form><!-- Dein Formular  --></form>
</div>
CSS: 
.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]​
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück