Styling Form Inputs with CSS

If your theme/template isn't white or near-white background, then the default form input control styling is probably not going to look nice.

With this little bit of styling in my template CSS file (style.css) I got most of the way to getting the look and feel that I was after:

.inputbox, textarea, select {
    background: #455;
    color: #9bb;
    border-color: #799;
    border-style:solid;
    margin:0px;
    margin-right:5px;
    padding: 3px
}

input.button, button {
    cursor: hand;
    background: #344;
    color: #9bb;
    border-color: #799;
    border-style:solid;
    margin:0px;
    padding:3px;
}

input.button:hover, button:hover {
    border-color: #eee;
    color:#fff;
}

label {
    font-size:0.8em;
    color:#233;
    margin-left:3px;
}

Most, but not all.  Now I really like off-white backgrounds, however I wanted to explore a lower-contrast design with this site: one that would allow me to use both very light and very dark text.  Perhaps a mistake, however you don't learn if you don't try.  The template's design will very likely evolve!

NOW I don't mean to rant: but anyone who thinks that CSS is a mature, robust technology that gives the designer/developer great control over the presentation of a website should set the background color of a checkbox.  There they were, the WHITE checkboxes and radio buttons, like cigarette burns in a nice dark curtain.  There must be some way to change them!

So I set off in search of a Javascript/xhtml solution that would work in my template site-wide, and would not cause usability issues.  After a little reseach, I ended up trying this solution.

It was easy to implement (not counting the time I spent fussing around with my custom graphics) , it works across the site nicely and it has another aspect I like: the default html behaviour of checkboxes and radio buttons is the only environment I know that doesn't manipulate the control when you click the label. All other application I have used do this.  With this solution, the label also acts as the control.

I suppose I'm happy with this solution, at least so far. One drawback is that I still get the burn holes while the graphic pieces load (I have yet to identify a usable -- e.g. works like the real controls for screen readers and the like -- solution that does). The only other thing I wished it did was let me set the select dropdown arrow with as much ease and usability!