CSS pseudo class :focus

The :focus pseudo-class applies while an element has the focus. There can be various ways to get focus on an element. Some of these are:

  • Mouse click (e.g. textarea, input)
  • Tab key
  • Javascript code

Example – css :focus

This example reduces font-size to 0.9em when a link gets clicked. Note that click does not reload the page as we are adding hash fragment in url.

<style type="text/css">
:focus {
  background-color: lightgreen;
<p>Use tab or click to change focus<p>
<input type="text" value="text1" autofocus>
<input type="button" value="button1">
<a href="#target1">link1</a><br/>



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments