Background color in input and text fields
Solution 1
input[type="text"], textarea {
background-color : #d1d1d1;
}
Hope that helps :)
Edit: working example, http://jsfiddle.net/C5WxK/
Solution 2
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; }
Solution 3
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)).
Related videos on Youtube
Comments
-
3D-kreativ about 2 years
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; }
-
3D-kreativ about 13 yearsNice! There is a border effect in the input field, but not the textarea?
-
Damien-Wright over 9 yearsThey are 2 separate tags and need to be addressed separately...
input[type="text"]
doesn't addresstextarea
fields. -
Gem over 6 yearsHi, 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.
-
pumpkinthehead about 5 yearsChrome autofill broke it for me. This answer can fix that: stackoverflow.com/questions/2781549/…
-
McFloofenbork almost 5 yearsFor some reason, my input fields are only being stylized the moment the page renders. Then, it fades.