Question

Is there a way to write style rules that will only influence text fields. Suppose I have the following:

<div id="helloDiv">
<input type="text" name="something" /><br />
<input type="checkbox" name="somethingElse" /><br />
<input type="submit" name="go" />
</div>

div#helloDiv input {
   border: 1px solid red;
}

The problem with the above CSS rule is that it will affect ALL input fields not just input text but also radio buttons, submit buttons, etc.

So is there a cross browser solution to affect just one type of input field within a div or other page element (without resorting to assigning the input fields styles individually).

Answer 1

The most tedious but IE6-compatible way to do it is to give all your input type="text" elements some specific CSS class, like class="text", and targeting that class only:

div#helloDiv input.text {
    /* Styles */
}

The simplest, CSS2.1 but IE6-incompatible way is just

div#helloDiv input[type="text"] {
    /* Styles */
}

without modifying your HTML.

Addendum: per animuson’s comment, choose either one of these. Decide whether or not you need or want to support IE6, and take the appropriate code.