The CSS :focus psuedo-class selects an element in its focus state. This happens when you click on an element or select it with the tab button. :focus comes after the name of the element you want to select.
You may want to apply a style to an element only when it has focus on the web page. For instance, you may want to apply a border to a form field when a user clicks on the form field.
That’s where the CSS :focus pseudo-class comes in. The :focus pseudo-class applies a style when a user clicks on an element or selects the element using the tab keyboard button.
This tutorial will discuss, with an example, the basics of the CSS :focus pseudo-class, and how to use it in your code. By the end of reading this tutorial, you’ll be an expert at using the :focus pseudo-class to apply styles to elements in focus.
CSS Pseudo-Classes
A pseudo-class is a keyword added to a CSS selector. The pseudo-class specifies the state in which an element should appear in order for a style to apply. Pseudo-classes are added after a selector.
Pseudo-classes let you set rules for elements in a special state, such as when you give an element focus. For this tutorial, we’re going to focus on the :focus pseudo-class.
CSS :focus Pseudo-Class
The CSS :focus pseudo-class applies styles to an element when the element has received focus on the web page. If a user clicks on an element or selects it with the tab key, it will become a focused element.
The syntax for the :focus pseudo class is:
textarea:focus {
border: 1px solid blue;
}This code sets a one pixel-wide solid blue border around any HTML <textarea> elements on the web page. But, this rule is only applied when the <textarea> element is in focus.
You can see our pseudo-class is applied after the element we want to select. It is necessary to specify a :focus psuedo-class for each element to which you want to class to apply in a list of selectors.
Consider this syntax:
input, textarea:focus {
border: 1px solid blue;
}The CSS rule in our code is applied to all <input> elements and all <textarea> tags when the user focuses on the text area. But, our rule is not applied to <input> tags in focus.
One common scenario where the :focus selector is used is to style web forms. For instance, you may want the background color of a web form field to change when the user clicks on the form field. Or you may want to change the color of the border to change when the user clicks on the form field.
:focus CSS Example
We have been asked to design a web form field for a website that collects a user’s first name. When the form field enters the focus state, an orange border should be applied to the form field. In addition, the background color of the form field should change to light gray.
We could use the following code to design this form field:
<html>
<input class="textField" placeholder="First Name">
<style>
.textField:focus {
background-color: lightgray;
border: 2px solid orange;
}Click the 
button in the code editor above to see the output of our HTML/CSS code.
We have defined an HTML <input> field with the class name textField. This input field shows the placeholder text First Name.
When the user moves the form field into focus, the CSS properties in our .textField:focus rule are applied. These styles set a light gray background color and apply a 2px-wide solid orange CSS border around our form field.
When the user moves the form field out of focus, these styles are no longer applied.
Conclusion
The :focus pseudo-class applies a style when the user moves a web element into focus on the web page. :focus is commonly used to apply styles to fields in a form that are triggered when the user moves a form field into focus.
:focus is one of many CSS pseudo-classes, such as :hover. To use a pseudo-class, specify the name of the pseudo-class after your CSS selector.
Are you interested in learning more about CSS? Check out our How to Learn CSS guide. You’ll find actionable tips on how to learn CSS. In addition, our guide includes a list of top learning resources to help you master CSS.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
