focus
CSS :focus Pseudo Class
The :focus selects and styles the elements that are focused by the user.
Elements, such as <input>, <button>, and <textarea> can receive focus either by tabbing using the keyboard or by clicking.
Accessibility Concerns
Accessibility Concerns
The visual focus indicator should be accessible to all people. According to WCAG 2.1 SC 1.4.11 Non-Text Contrast, the visual focus indicator should be at least 3 to 1.
When removing the focus outline (visible focus indicator) always replace it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.
:focus {
outline: none;
}
Version
Version
CSS2 Spec
Selectors level 3
Selectors level 4
Syntax
Syntax
:focus {
css declarations;
}
Example of the :focus selector:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name"> Surname:
<input type="text" name="surname">
</form>
</body>
</html>
Example of the :focus selector with the <label> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search">
</form>
</body>
</html>