Separate textboxes and buttons in css

Question

I would like to have a robust CSS that would have all forms I have looking the same.

I encounter a problem when defining CSS properties for the buttons and textboxes

here is the css

#content .forms input {
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

I would like to have CSS for the buttons separate from the buttons but the

"#content .forms 'input' "

makes then look the same. Any ideas on how i would go about this?

Answer 1

If you can ignore IE6 you could use the attribute selector:

input[type="text"] {

}

input[type="button"] {

}

If you can't, you will have to give your buttons/textboxes a class and apply styles to that class.

Answer 2

you can use attribute selectors like input[type="submit"].

Answer 3

You can add multiple classes to an element by separating the classes with a space.

<style>
    .FirstClass { color: #a9a9a9 }
    .SecondClass { font-size: 10pt; }
</style>
<input type='text' class='FirstClass SecondClass' />

Adding multiple classes can be confusing if you apply more and more classes to a single element.