border around text input in a html form

Question

I want a red border around my input text fields in a html form. But using css

input { border: 1px solid #d66 }

also puts a red border around my buttons (which I don't want).

input.button, input.submit or input.text and anything inside { } doesn't do anything.

How do I change the border around a text input only, and how do I change the font in the submit button only? I'm using IE9.

Thanks!

giftcv · Accepted Answer · 2012-03-21 10:10:48Z

16

To target textboxes, use

input[type="text"] { border: 1px solid #d66 }

There are a lot more attribute selectors available.

answered Mar 21, 2012 at 9:37

giftcv

1,66215 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle · Accepted Answer · 2012-03-21 09:50:08Z

4

What you need is an attribute selector:

input[type="text"] { border: 1px solid #d66 }

This selects the input of type "text."

You can also use other attribute selectors to select other elements:

input[type="submit"] { border: 1px solid #d66 }
input[type="checkbox"] { border: 1px solid #d66 }

But also be aware that these selectors are not supported by IE7 and lower.

answered Mar 21, 2012 at 9:50

Kyle

67.5k28 gold badges148 silver badges153 bronze badges