CSS | :focus Selector
The :focus Selector is used to target the focused element. This selector work on User Input elements.
Syntax:
:focus {
//property
}
Example:
<!DOCTYPE html> <html> <head> <style> input:focus { background-color: limegreen; } </style> </head> <body> <h3>Fill this form</h3> <form> Full name: <input type="text" placeholder="Enter Name" name="name"> <br> User Id: <input type="text" placeholder="Enter Username" name="uid"> <br> Password: <input type="password" placeholder="Enter Password" name="pass"> <br> <button type="button" onclick="#">Sign Up</button> </form> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers:
Recommended Posts:
- jQuery | :focus Selector
- Difference between :focus and :active selector
- AngularJS | ng-focus Directive
- HTML | DOM focus() Method
- How to remove focus around buttons on click?
- Implement a JavaScript when an element loses focus
- Set the focus to HTML form element using JavaScript
- JQuery | Set focus on a form input text field on page load
- Javascript | Window Blur() and Window Focus() Method
- CSS | * Selector
- CSS | :not Selector
- CSS | ::after Selector
- CSS | #id Selector
- CSS | ::before selector
- CSS | :lang Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
