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.
Watch a video course
CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
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
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>
Browser support
4.0+ | 12.0+ | 2.0+ | 3.1+ | 10.0+ |
Practice Your Knowledge
What is the function of the ':focus' pseudo-class in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.