CSS Selector - Using the :focus Selector

:focus selects elements with focus.

:focus is a Pseudo-class and it applies to An element that has focus.

:focus applies to an element during the time in which it has focus.

One example is an input box that has the text-input cursor within it.

Other elements, such as hyperlinks, can also have focus.


a:focus {outline: 1px  dotted red;}
input:focus {background: yellow;}


CSS Version

CSS Syntax

:focus { 
   style properties 

Browser compatibility

:focus Yes 8.0 Yes Yes Yes


The following code uses the :focus Selector.

<style type="text/css">
:focus {<!--from   ww  w. j a v  a  2s  .  c om-->
  border: thin black solid;
  padding: 4px;
    Name: <input type="text" name="name" />
    <p />
    City: <input type="text" name="city" />
    <p />
    <input type="submit" />

Click to view the demo