Form inputs are another type of component that use color to indicate an action to a user. Similar to buttons, form inputs have certain states.
There is the default state, which is how the user views the inputs when they first arrive at a page.
The second state is the selected, or active, state. These provide the user with a visual cue that they have highlighted the field and have the ability to type within it. This is typically achieved by using a border color or a box shadow effect.
If the input field is unable to be edited or typed within, there should be a disabled state as well. This should render much like the disabled button, in that it is grayed out.
Inputs also have other colors that indicate success and failure. These are called semantic colors.
Instructions
To ensure our users know what form element they are filling out, we are going to add some color to our hover state and active state. To do so we will use a CSS pseudo-selector.
In the styles.css file, find the selectors
and change the border property from 1px solid #CCCCCC to 1px solid #42A5F5.