How to use focus In CSS
The outline approach adds an outline around the focused element without affecting the layout of the page using the sudo class focus.
Syntax:
:focus {
outline: 2px solid #308D46;
}
Example 1: Using the CSS `:focus` pseudo-class, this example adds a green outline to the input element when it is focused, providing visual feedback to users.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Outline Approach Example</title>
<style>
input:focus {
outline: 2px solid #308D46;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
Output:
Example 2: Utilizing the CSS `:focus` pseudo-class, this example applies a green box shadow to the button element when it is focused, enhancing its visual appearance and providing interactive feedback to users.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Box-Shadow Approach Example</title>
<style>
button:focus {
box-shadow: 0 0 5px 2px #308D46;
}
</style>
</head>
<body>
<button>Click me</button>
</body>
</html>
Output:
Example 3: In this example, the `:focus` pseudo-class in CSS is employed to add a green border around the hyperlink when it receives focus, offering a visual indication of interactivity to users.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Border Approach Example</title>
<style>
a:focus {
border: 2px solid #308D46;
}
</style>
</head>
<body>
<a href="#">Link</a>
</body>
</html>
Output:
Example 4: To demonstrate using the `:focus` pseudo-class along with the `::after` pseudo-element in CSS is utilized to create a green border around the div when it receives focus, providing a visual cue for user interaction.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-Elements Approach Example</title>
<style>
div:focus::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 2px solid #308D46;
}
</style>
</head>
<body>
<div tabindex="0">Focus me</div>
</body>
</html>
Output:
How to Create a Focus Style for Interactive Elements in CSS ?
In web development, ensuring that interactive elements have a clear focus state is crucial for accessibility and usability. When users navigate a webpage using keyboard controls, they rely on visual cues to understand which element they are currently interacting with.
Contact Us