Pure CSS – Inputs:

Inputs are generally text fields, text area, check boxes, radios through which the input could be provided. Input elements have different types of input sizes as like pure grids units.

Here, we can use the class name pure-input-* which can be defined for various sizes.



Below is the output:



Various Input related attributes provided in Pure CSS are

  1. Required: This Required input works as like the text validation particularly for email type
  2. Disabled: This is a disabled input where can just see the label inside the field. You cannot even copy that field.
  3. Readonly: This is readonly input where you can copy the label. But, you cannot edit the field.

We have some other input classes like pure-input-rounded, pure-checkbox, pure-radio which are provided in the example to understand how they work.



Please check the output in your browser and verify the text fields we have created.