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.