CSS3—form with :focus
   

 

Here is a quick demo of a form with that outer glow you see a lot, e.g. on Apple devices. Note that the text on screen is made with the <label> element, as it should be for proper structural markup.



The key is to style the :focus pseudoclass. We have seen mainly the four link pseudoclasses (:link, :visited, :hover, :active), but :focus is obviously useful for forms (it's activated when an element is selected, or in this case, clicked). The opposite (deselecting) is :blur. You don't need to style that as the effect goes away when the <input> element loses focus.

So—what's the CSS? Build a quick page to try it first, then check if you don't get it.

 

Back to home page