Helping users to focus on one form control at a time

This article was first published on css-101.org (02-10-2012).

#css
#trick

This simple CSS trick can be used to create a mask outside the border box of any focus-able element. It relies on outline-offset.

Check it out:

CSS rules

input {
    border:5px solid #ccc;
    outline:rgba(0,0,0,.8) 2000px solid;
    outline:none9;
    outline-offset: 3000px;
    -webkit-transition: outline-offset .5s;
       -moz-transition: outline-offset .5s;
         -o-transition: outline-offset .5s;
            transition: outline-offset .5s;
}
input:focus {
    outline-offset:0;
    position:relative;
    z-index:1;
    background:yellow;
    border-color:yellow;
}

We create a very large outline that is kept away from the box via outline-offset, when the element gets focus we kill that offset value with a 500ms transition.

This should degrade nicely in Internet explorer as oldIE does not let us style outline and IE 9 does not seem to be aware of the outline-offset property (hence the 9 hack above).