Hintergrundfarbe in Eingabe- und Textfeldern

Ich möchte den farbigen Hintergrund in den Text- und Eingabefeldern eines Formulars ändern, aber wenn ich dies tue, wirkt sich dies auch auf die Schaltfläche "Senden" aus! Könnte es auf eine andere Weise gemacht werden, die die Schaltfläche nicht beeinflusst?

Ich habe diesen Code verwendet:

input, textarea {
  background-color: #d1d1d1;
}

css

— 3D-kreativ
quelle

Verwenden Sie, wie @ Damien-at-SF sagte, die Eingabe [type = "text"] anstelle der Eingabe. Verwenden Sie aber auch border: none;Regeln, um Standard-Texteingaberänder zu vermeiden.

— Manolo

Antworten:

142

input[type="text"], textarea {

  background-color : #d1d1d1; 

}

Hoffentlich hilft das :)

Bearbeiten: Arbeitsbeispiel, http://jsfiddle.net/C5WxK/

— Damien-Wright
quelle

Nett! Es gibt einen Randeffekt im Eingabefeld, aber nicht im Textbereich?

— 3D-kreative

Warum hast du beide input[type="text"]und verwendet textarea?

— URL87

Sie sind 2 separate Tags und müssen separat adressiert werden ... adressiert input[type="text"]keine textareaFelder.

— Damien-Wright

Hallo Damien, lass mich eines wissen, ich habe Form, ich muss Farbdetails vom Kunden erhalten, so dass der Kunde zwei Farben auswählen kann, tatsächlich habe ich drei Farben, also wählen sie mindestens zwei Farben.

— Gem

Aus irgendeinem Grund werden meine Eingabefelder erst in dem Moment stilisiert, in dem die Seite gerendert wird. Dann verblasst es.

— McFloofenbork

Die beste Lösung ist die Attributauswahl in CSS ( input[type="text"]), wie von den anderen vorgeschlagen.

Wenn Sie Internet Explorer 6 unterstützen müssen , können Sie es nicht verwenden ( QuirksMode ). Nun, nur wenn Sie es müssen und auch bereit sind, es zu unterstützen.

In diesem Fall scheint Ihre einzige Option darin zu bestehen, Klassen für Eingabeelemente zu definieren.

<input type="text" class="input-box" ... />
<input type="submit" class="button" ... />
...

und ziele mit einem Klassenselektor auf sie ab:

input.input-box, textarea { background: cyan; }

— Kapa
quelle

Sie möchten Eingabefelder beschränken , die vom Typ Text sind so den Selektor verwenden , input[type=text]anstatt input(die für alle Eingabefelder gelten (zB solche vom Typ einreichen als auch)).

— Eric Conner
quelle