How do I style input boxes using HTML/CSS?
Asked by
WEWT (
8)
July 6th, 2007
Observing members:
0
Composing members:
0
2 Answers
I recommend downloading Firefox and the plugin Firebug (getfirebug.com). It's amazing. Then you can go to any website (like apple.com), press the green checkbox in the bottom right to open firebug and press "inspect"--then you can select any element of any page, and it will show you exactly what css rules are used to lay it out (plus you can edit them on the fly). It's really worth exploring, because once you get the hang of it, you'll never use anything else.
p.s. Input boxes can styled like most other css elements:
input.myclass {
color: #444444;
etc.
}
Just be sure to check out your site in Safari because that browser has special rules about displaying input boxes--it's more restrictive.
Ben had a great suggestion.
Note that you can just use something like the following
input {
background: #fff;
border: 1px solid #000;
}
would give you a white background with a black border on all your inputs. I'm sure you can extend it from there, but a good tutorial on the subject would be http://www.sitepoint.com/article/style-web-forms-css
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.