Input Pseudo States

Inputs have state a variety of additional functionality when it comes to your forms. Inputs can be disabled, checked, valid, and focused. These attributes can be applied to change the way these inputs collect data. We still cannot trust data coming from these inputs when it comes to security, but we can use these states to improve usability overall to the user.

Disabled

The input becomes disabled and you can no longer interact with it. The first of each input has the disabled attribute on it.

Focus

The focus state can be used to help the user identify what input they are currently on. This also highlights the input on tab focus. In this example we change the background color to red and the text color to white on focus.

Checked

Allows us to pre-selected a select menu, checkbox, and radio input types.