General Question

WEWT's avatar

How do I style input boxes using HTML/CSS?

Asked by WEWT (8points) July 6th, 2007

Like apple.com

Observing members: 0 Composing members: 0

2 Answers

ben's avatar

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.

stickwithjosh's avatar

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

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther