:focus CSS Pseudo Class

Description

The :focus pseudo-class defines a style for an element that receives focus. For example, it may be the text field of the form in which the cursor is positioned.

Syntax

element:focus { … }

Example

First name:<br>

  <input type="text" name="firstname">

  <br>

  Last name:<br>

  <input type="text" name="lastname">

input:focus {

   border: 2px solid red;

}

Notes

Chrome does not add a style to the <a> element, to make it understand the a:focus rule, add the tabindex attribute to the <a> element.

Browser Support

Desktop
8	12	1	1	7	1
Tablets / Mobile
1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 25th November 2019