Defining default style of textfields w/o effecting look of buttons

How do I define the default style of all text fields without effecting the look of buttons? (…and vice versa)

The CSS below effects both:


input {
	font-family: arial;
	font-size: 11px;
	color: #000000;
	height: 14px;
	background-color: #FFF;
	padding: 3px;
	border: 0px;
	margin: 0px;
}

There’s a number of ways. You could have a separate class for text inputs and target them. But it’s a good idea to place inputs (along with labels, where appropriate) inside a block level container, such as a div, so perhaps give that container a class instead. E.g.


<div [COLOR="Red"]class="text"[/COLOR]>
  <label for="com">Comments</label>
  <textarea name="comments" id="com"></textarea>
</div>

<div [COLOR="Red"]class="submit"[/COLOR]>
  <input type="submit" value="Send">
</div>

Then in the CSS, target the text inputs like so:


.text input {
    font-family: arial;
    font-size: 11px;
    color: #000000;
    height: 14px;
    background-color: #FFF;
    padding: 3px;
    border: 0px;
    margin: 0px;
}

Hi,

If you don’t care about iE6 you can use attribute selectors.


[B]input[type="text"] {[/B]
    font-family: arial;
    font-size: 11px;
    color: #000000;
    height: 14px;
    background-color: #fff;
    padding: 3px;
    border: 0px;
    margin: 0px;
}
input[type="submit"] {etc...}


This is actually how I have been doing it. It just seemed pointless to set the same class to every text field if I could just define a default style to the element. What Paul wrote was the kind of answer I was looking for, but if it doesn’t work with IE6 then I’ll just stick to using classes. (Apparently about every 1 in 10 people still use IE6.)

Thanks for the replies. =)