CODEWITHSUNDEEP
csshtml-input
3D-kreativ
3D-kreativ

Reputation: 9319

Background color in input and text fields

I would like to change the color background in the text and input fields of a form, but when I do this it also affects the submit button! Could it be done in some other way that does not affect the button?

I have used this code:

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

Upvotes: 112

Views: 631856

Answers (4)

Joao Paulo
Joao Paulo

Reputation: 15

you can simply use the button tag with type="submit"

<button type="submit">Submit</button>

besides solving your problem, now you can put HTML inside it(icons for example), rather than using the value attribute to set the text.

If you need to insert a normal button inside a form, use type="button" to prevent it submitiing the form

Upvotes: -1

Damien-Wright
Damien-Wright

Reputation: 7554

input[type="text"], textarea {

  background-color : #d1d1d1; 

}

Edit: working example, http://jsfiddle.net/C5WxK/

Upvotes: 189

kapa
kapa

Reputation: 78751

The best solution is the attribute selector in CSS (input[type="text"]) as the others suggested.

But if you have to support Internet Explorer 6, you cannot use it (QuirksMode). Well, only if you have to and also are willing to support it.

In this case your only option seems to be to define classes on input elements.

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

and target them with a class selector:

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

Upvotes: 10

Eric Conner
Eric Conner

Reputation: 10772

You want to restrict to input fields that are of type text so use the selector input[type=text] rather than input (which will apply to all input fields (e.g. those of type submit as well)).

Upvotes: 3

Related Questions