How to create only one type of input field without affecting other input types using CSS

Question

Is there a way to write style rules that will only affect 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 CSS rule above is that it will affect ALL input fields, not just text input, but also radio buttons, submit buttons, etc.

So, is there a solution with a transverse browser that affects only one type of input field in a div element or another element (without resorting to assigning input field styles separately).

Answer 1

, IE6 - input type="text" CSS-, class="text", :

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

, CSS2.1, IE6- -

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

HTML.

: , . , IE6, .

Answer 2

input[type=text] {}

IE6, . , , JavaScript. . .

Answer 3

, :

input[type=text] {
  /* stuff */
}

Now support for this does not apply to Ye Olde IE6 . Thus, many people simply bite a bullet and add classes to their materials to style them. You can then set common styles for your inputs, and then change for specific types. So something like:

input { /* common styles */ }
input.mySubmit { /* only submit */ }
input.myText { /* only text */ }