Background color in input and text fields

CssHtml Input

Css Problem Overview

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

Css Solutions

Solution 1 - Css

input[type="text"], textarea {

  background-color : #d1d1d1; 

}

Hope that helps :)

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

Solution 2 - Css

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 - Css

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

Categories
Recommended Css Solutions
Recommended Html Input Solutions

Previous Solution:

Stop floating divs from wrapping

HtmlCss FloatWord Wrap

Next Solution:

Difference between Top and Limit Keyword in SQL

Sql

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Question3D-kreativView Question on Stackoverflow
Solution 1 - CssDamien-WrightView Answer on Stackoverflow
Solution 2 - CsskapaView Answer on Stackoverflow
Solution 3 - CssEric ConnerView Answer on Stackoverflow