Background color in input and text fields

Question

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;
}

As @Damien-at-SF said, use input[type="text"] instead of input. But also use `border: none;` rule to avoid default text input borders. — Manolo, Mar 22 '16 at 16:17

Damien-Wright · Accepted Answer · 2011-04-11T06:55:12.743

167

input[type="text"], textarea {

  background-color : #d1d1d1; 

}

Hope that helps :)

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

edited Apr 11 '11 at 06:55

answered Apr 11 '11 at 06:50

Damien-Wright

6,928
4
26
23

Nice! There is a border effect in the input field, but not the textarea? – 3D-kreativ Apr 11 '11 at 13:34
Why did you use both `input[type="text"]` and `textarea` ? – URL87 Apr 01 '14 at 07:34
1

They are 2 separate tags and need to be addressed separately... `input[type="text"]` doesn't address `textarea` fields. – Damien-Wright Sep 25 '14 at 00:09
Hi, Damien, let me know one thing, i have form, i need to get color details from customer like the customer can select two colors, actually, i have three colors, so they choose at least two colors. – Gem Nov 15 '17 at 11:16
Chrome autofill broke it for me. This answer can fix that: https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete – pumpkinthehead Apr 22 '19 at 18:12
1

For some reason, my input fields are only being stylized the moment the page renders. Then, it fades. – McFloofenbork Jun 04 '19 at 15:53
Why does this change the size of my text field? – Aaron Franke Jan 27 '20 at 06:20

score 9 · Answer 2 · edited May 21 '20 at 19:55

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; }

score 2 · Answer 3 · answered Apr 11 '11 at 06:50

2

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)).

answered Apr 11 '11 at 06:50

Eric Conner

9,826
5
49
62

Background color in input and text fields

3 Answers3

Linked