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.