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
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.