Skip to main content
X

Explore your training options in 10 minutes

CSS focus: A How-To Guide

James Gallagher - January 07, 2021


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

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 Image of the "Run Code" Button, a triangle inside a circle 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.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.

Skip to main content