Style Text Input Boxes

If you are using Firefox, Mozilla, or certain other modern browsers—and by modern, I do not mean Internet Explorer —you may notice some styling when hovering over or clicking on my text boxes, such as those on my contact form.  The styling consists of the following:

• The initial, or default, background is gray, rather than white;



• When hovering over the box, the border darkens on mouseover or hover; and



• When clicking on the box—called “focusing”—the background changes from gray to white and the border changes to another color—red

I have found that these little tweaks are not only nice to look at, but they are functional in that the changing borders and background help the user navigate the form and keep track of in which box the cursor is currently positioned.  Here is a little tutorial on how to add this styling.

The initial styling is the gray border and the gray background that you see in the various boxes before hovering and focusing. There are two CSS elements that need to be modified or added in order for the initial styling effects to work: textarea and input. Here is what my textarea definition looks like:

This should take care of the initial styling for the larger taxtboxes, such as the comment box and the contact form box. For the smaller boxes, which are input elements, I created a new class called “gray” like this:

I then added this class to each reference in my templates to the input element, such as in the comments area, on my contact template, in my search box code, and my mailing list code. Here is part of my search box code, as an example:

Ok, now that I had the initial styling done for the textareas and the smaller input elements, it was time to modify the hover and focus styling. I combined both the textarea and the new input.gray class together, one for the hover rule and one for the focus rule, like this:

The hover rule simply changes the border from gray to black, and the focus rule does two things — changes the background to white and changes the border to red. That is all there is to it.

One last note: as far as I can tell, this only works in Firefox and other Gecko-based browsers. Based on my tests, it does not work in Opera or Safari (I think it could work in Safari, but I understand that Apple has hardcoded some things like buttons and borders to ensure that users get the true Aqua experience). It also does not work in Internet Explorer, which is not surprising. Maybe there is a way you can get it to work in those other browsers and if you know how, please do post that as a comment here and let me know. However, if it turns out that this in fact only works in Firefox et al., you can leave it as a little “optimized” treat just for visitors that use those browsers.

Enjoy!

The trackback URL for this entry is: Trackbacks are disabled for this entry

Trackbacks:

Comments: