Home
CSS
CSS Accessibility
Tryit: Visible focus indicators
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 orange; } </style> </head> <body> <h2>Visible Focus Indicators</h2> <p>Tab to, or click inside the input field, link, or button to see :focus styling:</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>Button</button></p> </body> </html>
