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
outline property with the value
removes the outline for text input
in the example given above.