Hintergrundfarbe in Eingabe- und Textfeldern

72

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
1
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
1
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
1
Aus irgendeinem Grund werden meine Eingabefelder erst in dem Moment stilisiert, in dem die Seite gerendert wird. Dann verblasst es.
McFloofenbork
9

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
2

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