Outlining textbox input fields (and getting it to work in IE)

While using Google GMail today, I noticed that they put a blue highlighting around the text input boxes when they have input focus. It’s a nice touch that makes it just a bit easier for users to identify which field their typing in. (Safari users, of course, get this on all web sites out of the box.)

Getting this to work on your web site is a simple matter of applying some CSS styles. The trick is to give your normal inputs fields a 1px border and a 1px margin; then, when they have focus, give them a 2px border (with a different color if you so choose) and no margin. This will ensure the dimensions of the element don’t change when the border width changes.

The following CSS provides an example of styling text boxes (both text and password inputs, and multi-line text boxes) and select lists (single and multi-line) with an alternate outline when holding the input focus.

input[type=text], input[type=password], textarea, select {
border-top: solid 1px #8e8e8e;
border-right: solid 1px #d1d1d1;
border-left: solid 1px #d1d1d1;
border-bottom: solid 1px #e4e4e4;
margin: 1px;
padding: 2px;
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
border-color: #4488cc;
border-style: solid;
border-width: 2px;
margin: 0;

Like many good web tricks, this’ll look great in Firefox but won’t do anything in Internet Explorer. That’s because IE (through version 7) doesn’t support attribute selectors (as in [type=text]) or the :focus selector. To get things to work in IE, we need to rely on a little more CSS and some JavaScript.

Continue reading

CSS styled forms

I like using CSS for layouts and for making sites look pretty — partially because it’s a challenge that is quite satisfying when it works, and partially because I’m not a designer and don’t do well with more robust design elements.

One thing that I often liked using CSS for is for forms. For the past two or so years I’ve been tweaking my technique, and I think I finally have something that works well enough in most situations to share it with you.


The sample page uses ___layouts for the basic page structure. ___layouts (a heck of a name, I tell ya) is derived from Yahoo’s UI library, but it’s easier to implement.


The following browsers have been tested against the sample page, which also provides instructions and the CSS. Note any compatibility issues.

Important Note: At very small screen widths (generally less than 600 pixels wide), things can get out of control. Firefox 2.0 handles this best, but in all cases, things get messy at very small screen widths. As a result, setting a min-width on your body tag (or using the appropriate hack to do the same in IE6) is recommended.

  • Firefox
    • Firefox No issues.
    • Firefox No issues.
    • Firefox 1.0: No issues.
  • Internet Explorer
    • Internet Explorer 7.0.5730.11: No issues.
    • Internet Explorer 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 (sorry, I couldn’t help myself): Background colors do not fill complete rows. To use background colors, you need to use a CSS hack (I may add this in the future). Incredibly, there are otherwise no issues.
  • Netscape
    • Netscape 8.1: Line around form doesn’t fully wrap with legend, causing a very minor stylistic quirk, but otherwise no issues.
    • Netscape 7.2: Slightly worse handling of fieldset border than Netscape 8.1, causing a minor stylistic quirk, but otherwise no issues.
    • Netscape 6.2: Totally broken. Most content in the form does not render. To resolve this, you need to set overflow:visible on the div.row. However, doing this breaks some scaling features (long text boxes will run outside the box) and breaks the row background color. Considering Netscape 6.2 was launch in November 2001, instead of hacking to support it, tell your visitors who are using it to upgrade.
  • Opera
    • Opera 9.10: No issues.
    • Opera 8.5.4: No issues.
    • Opera 7.11: Totally broken. See the Netscape 6.2 notes for a fix (and why you shouldn’t bother, since Opera 7.11 was released some time in 2003 and likely has a tiny user base).
    • Opera 6.2: Totally broken (though slightly differently than with Opera 7.11). All notes for Opera 7.11 apply here.

To view the CSS used, some brief instructions, and a form sample, go to http://www.sidesofmarch.com/wp-content/uploads/files/cssforms/cssforms.htm.