Home
CSS
CSS Accessibility
Tryit: The focus outline
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> a:focus, button:focus, input:focus { outline: 2px solid #005fcc; outline-offset: 2px; } .button { background-color: #04AA6D; border: none; color: white; padding: 10px; text-align: center; font-size: 16px; cursor: pointer; } </style> </head> <body> <h1>Use Visible Focus Indicators</h1> <p>Click inside (or tab to) the input field, link, or button to see styling on focus:</p> <form> <label for="name">Name: </label> <input id="name" name="name" type="text" /><br> </form> <p>A link: <a href="#">CSS Tutorial</a></p> <p>A button: <button class="button">Button</button></p> </body> </html>
