STYLING TEXT INPUTS

This example demonstrates the CSS properties commonly used with text inputs, most of which you have already met.

font-size sets the size of the text entered by the user.

color sets the text color, and background-color sets the background color of the input.

border adds a border around the edge of the input box, and border-radius can be used to create rounded corners (for browsers that support this property).

The :focus pseudo-class is used to change the background color of the text input when it is being used, and the :hover psuedo-class applies the same styles when the user hovers over them.

background-image adds a background image to the box. Because there is a different image for each input, we are using an attribute selector looking for the value of the id attribute on each input.