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;
}
</style>
<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/>
Related
- CSS pseudo class :link - style for unvisited links
- CSS pseudo class :visited - style for visited links
- CSS pseudo class :hover
- CSS pseudo class :active
