Styling Forms
14.11
Lesson

Hover & Focus Styles

When you take your mouse over a text input or a button, the background or border colour can be changed using the :hover pseudo-class selector:

Take your mouse pointer over the text field and the button to see the hover styles take effect. We have used the cursor property above to change the mouse pointer to hand symbol. Try removing it to notice the difference.

Also, when you tap on an input field or move focus to it using the tab key on your keyboard, a blue outline appears around the input field. This style can be changed using the :focus pseudo-class selector:

We have used the same styles for hover and focus actions. The outline property with the value none removes the outline for text input in the example given above.