Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Show clear visual indicators for focused elements
Essential for keyboard navigation
Use :focus and :focus-visible selectors
Never remove focus outlines without replacement
Help users navigate without a mouse
Required for web accessibility
Shows on ALL focus (keyboard AND mouse click)
button:focus { outline: 2px solid blue; }Shows ONLY for keyboard focus (recommended)
button:focus-visible { outline: 2px solid blue; }Styles parent when child is focused
form:focus-within { border-color: blue; }Use :focus-visible to avoid mouse click outlines
More natural user experience/* Simple focus indicator */
button:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
/* Custom focus ring with shadow */
a:focus-visible {
outline: 2px solid #10b981;
outline-offset: 4px;
border-radius: 4px;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}
/* Focus for inputs */
input:focus,
textarea:focus,
select:focus {
outline: 2px solid #3b82f6;
border-color: #3b82f6;
}/* Style form when any input is focused */
form:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Style card when button inside is focused */
.card:focus-within {
background: #f0f9ff;
border-color: #3b82f6;
}*:focus { outline: none; }<div class="container">
<h2>Click vs Tab Behavior</h2>
<p class="hint">Try both clicking and tabbing through these buttons</p>
<div class="demo-section">
<h3>Using :focus (shows on click too)</h3>
<button class="btn-focus">Click or Tab Me</button>
<button class="btn-focus">Another Button</button>
</div>
<div class="demo-section">
<h3>Using :focus-visible (keyboard only)</h3>
<button class="btn-focus-visible">Click or Tab Me</button>
<button class="btn-focus-visible">Another Button</button>
</div>
</div>Loading preview...
<div class="container">
<h2>Form Focus States</h2>
<form class="form-card">
<h3>Contact Form</h3>
<div class="field">
<label>Name</label>
<input type="text" placeholder="Enter your name">
</div>
<div class="field">
<label>Email</label>
<input type="email" placeholder="your@email.com">
</div>
<div class="field">
<label>Message</label>
<textarea rows="4" placeholder="Your message..."></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>Loading preview...
Clear focus indicators for all input fields
Visible focus on menu items and links
Clear indication of which action is selected
Accessible focus for dropdowns, modals, tabs
✅ Excellent Support: :focus works everywhere.:focus-visible is supported in Chrome 86+, Firefox 85+, Safari 15.4+, and Edge 86+. Use both for maximum compatibility!