CSS :focus property
The :focus pseudo-class in CSS applies styles to an element when it gains focus, typically through user interaction. This is commonly used to provide visual feedback when an element such as a form input, button, or link is selected or activated, either by clicking on it or navigating to it using the keyboard (e.g., by pressing the Tab key).
Syntax
element:focus {
/* styles */
}
element: The selector targets the specific element(s) you want to style when it has focus.
How It Works
Basic Usage:
- You apply styles to an element when it is focused. This is often used for form fields and interactive elements to enhance accessibility and usability.
input:focus { border-color: blue; outline: none; }- In this example, when an input field gains focus (e.g., when the user clicks inside it or navigates to it using the keyboard), its border color changes to blue, and the default outline is removed.
Links and Buttons:
- The
:focuspseudo-class can be used to style links and buttons to indicate that they are currently selected or being interacted with.
button:focus { box-shadow: 0 0 5px blue; } a:focus { color: red; text-decoration: underline; }- Here, a button gains a blue box shadow when focused, and a link's color changes to red with an underline when focused.
- The
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Example</title>
<style>
input {
padding: 10px;
border: 2px solid gray;
border-radius: 4px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus {
border-color: blue;
outline: none;
box-shadow: 0 0 5px blue;
}
button {
padding: 10px 20px;
border: 2px solid transparent;
background-color: lightgray;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:focus {
border-color: blue;
background-color: white;
box-shadow: 0 0 5px blue;
}
a {
color: blue;
text-decoration: none;
}
a:focus {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<input type="text" placeholder="Focus on me">
<button>Focus on me</button>
<a href="#">Focus on me</a>
</body>
</html>
Explanation:
input:focus:- When an input field gains focus, its border color changes to blue, the default outline is removed, and a blue box shadow is applied.
button:focus:- When a button gains focus, its border color changes to blue, its background color becomes white, and a blue box shadow is applied.
a:focus:- When a link gains focus, its color changes to red, and it is underlined.
Important Points
Default Focus Style:
- Browsers often apply default focus styles, such as an outline around form elements. You can customize or remove these styles using the
:focuspseudo-class.
- Browsers often apply default focus styles, such as an outline around form elements. You can customize or remove these styles using the
Accessibility:
- Using the
:focuspseudo-class is crucial for accessibility. It helps users who navigate with keyboards or assistive technologies to see which element is currently focused.
- Using the
Focus and Accessibility:
- Ensure that focus styles are visible and provide enough contrast to be easily seen by users with various visual impairments.
Interaction with Other Pseudo-Classes:
- The
:focuspseudo-class can be used in combination with other pseudo-classes, such as:hover, to create more complex interactive behaviors.
input:focus:hover { border-color: green; }- In this case, if an input field is both focused and hovered over, its border color will change to green.
- The