Helping users to focus on one form control at a time
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).
As a side note, I think this effect looks better on a white background: http://jsfiddle.net/thierrykoblentz/Rqezd/1/embedded/result/