Raible Designs

Sunken/Highlighted Input Fields with CSS

One thing I really like about TheServerSide's new look is the sunken input boxes (that light up on focus) in the top right corner. I noticed that Macromedia does this on a lot of their form's too. It's good stuff. Here's how easy it is to add this "feature".

In your stylesheet, add the following class definitions:

/* for cool looking "sunken" input boxes, from www.theserverside.com */
form#searchForm input {
    padding-left: 4px;
    margin: 1px 1px 1px 1px;
    border: 1px solid black;
    color: #777;
    background-image: url(../images/input_white.gif);
}

form#searchForm input.focus {
    margin: 0px 0px 0px 0px;
    border-bottom: #ffdead solid 2px;
    border-right: #ffdead solid 2px;
    border-left: #c07300 solid 2px;
    border-top:  #c07300 solid 2px;
    color: #000000;
}

Of course, restricting these classes to one form (as I've done with form id="searchForm") is optional. Then in your form's input fields, add: add a couple of onfocus and onblur event handlers:

onfocus="this.className='focus'" onblur="this.className=''"

You'll also need to grab the background image and put it on your site. If you're adding this to a form in your webapp, it might be easier to add all the event handlers with JavaScript:

var inputs = document.getElementsByTagName("input");
for (i=0; i < inputs.length; i++) {
    inputs[i].onfocus=function() {this.className='focus'};
    inputs[i].onblur=function() {this.className=''};
}

Thanks to the guys at TheServerSide for showing me how to do this - I dig it.

Posted in The Web at Jan 14 2004, 08:35:50 AM MST 11 Comments

Comments:

Using javascript seems like a kludge when the :focus pseudo-class can do all the work for you. Sure, IE doesn't support it, but from a standards point of view it's much better. I've been using something like this for a while:

form#commentForm .textfield {background: #000;}
form#commentForm .textfield:focus {background: #444;}

Also, having a changing border size isn't good because the hover causes the row to "twitch".

Posted by nowak on January 14, 2004 at 08:45 PM MST #

Thanks for the tip nowak - unforunately, 90% of the world runs on IE, so it's nice to have a cross-browser solution. When I integrated this into my app today, I did end up removing a few things to eliminate the twitch.

Posted by Matt Raible on January 14, 2004 at 09:46 PM MST #

Hey, i have tried this sunken_highlighted_input_fields_with_cssscript, but it doesn't work at all on a page i have created. does it have to be online to work?

Posted by Christiaan Neijens on March 04, 2004 at 09:20 AM MST #

I added the following to a global.js file that I include in every page. Sometimes I have to call the "highlighFormElements" manually on my JSP page (in body onload or with a JavaScript block after my form.

Posted by Matt Raible on March 04, 2004 at 03:39 PM MST #

aaa

Posted by 81.69.109.40 on November 28, 2004 at 08:30 AM MST #

fyi Matt said "I found that all the border attributes weren't necessary. The browser seems to default to the sunken look, so I just added the border." The focus class definition in appfuse for the sunken look is : form input, form textarea, form select { padding-left: 4px; color: #666; } form input.focus, form textarea.focus { border-color: orange; color: #000; }

Posted by Sanjiv Jivan on October 31, 2005 at 09:52 AM MST #

Posted by Sanjiv Jivan on October 31, 2005 at 09:53 AM MST #

Hi I Have A Myspace Music Page And I Figured out How To Get People To Rate My Music With This Code.....I Was Wondering How To Get The Submit Button To Send That Info To Me Without Them Having To Type Me A Message.Can Anyone Help Me? <FORM METHOD=post ACTION="My Email????"> Select an option:
<INPUT type="radio" name="option"> Good <INPUT type="radio" name="option"> O.K. <INPUT type="radio" name="option"> Bangin <INPUT type="radio" name="option"> Bad <INPUT type="radio" name="option"> Horrible <INPUT type="radio" name="option" CHECKED>Getting There

Select an option:
<INPUT type="checkbox" name="selection" CHECKED> Beat 1 <INPUT type="checkbox" name="selection"> Beat 2 <INPUT type="checkbox" name="selection"> Beat 3 <INPUT type="checkbox" name="selection"> Beat 4 <INPUT type="checkbox" name="selection"> Beat 5 <INPUT type="Submit" VALUE="Submit"> </FORM>

Posted by Chuck on July 29, 2006 at 09:16 AM MDT #

rtgysrtgrt

Posted by 205.233.28.39 on October 25, 2006 at 03:29 PM MDT #

Hi You can also get this functionality by adding globally. When a input box is selected then it will be hilighted. Below the code function attachEvent(name,element,callBack) { if (element.addEventListener) { element.addEventListener(name, callBack,false); } else if (element.attachEvent) { element.attachEvent('on' + name, callBack); } } function setListner(eve,func) { var ele = document.forms[0].elements; for(var i = 0; i <ele.length;i++) { element = ele[i]; if (element.type) { switch (element.type) { case 'checkbox': case 'radio': case 'password': case 'text': case 'textarea': case 'select-one': case 'select-multiple': attachEvent(eve,element,func); } } } } setListner("focus",setBKColor); setListner("blur",reSetBKColor); Here i add two listener. One focus and the another for blur. Call these setListner at onLoad function. I get this example online. It is very nice.

Posted by Md.Tahmilur Rahman on December 05, 2006 at 10:16 AM MST #

Posted by 68.189.242.81 on April 10, 2007 at 01:48 AM MDT #

10+ YEARS

TWITTER

RECENT ENTRIES

Tag Cloud

Sunken/Highlighted Input Fields with CSS