/    /  Pure CSS – Inputs

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.

Example: 

<html> 

<head> 

<title>Pure CSS Input Sizing</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> 

</head> 

 <body> 

   <form class="pure-form">

    <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>

    <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>

    <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>

    <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>

    <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>

 </form>

   </body> 

</html>

Below is the output:

Inputs:

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.

Example:

<html>

<head>

<title>Pure CSS Inputs</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">

</head>

<body>

<form class="pure-form">

<input type="email" placeholder="Requires an email" required>

<input type="text" placeholder="Disabled input here..." disabled>

<input type="text" value="Readonly input here..." readonly>

<input type="text" class="pure-input-rounded">

<label for="option-one" class="pure-checkbox">

<input id="option-one" type="checkbox" value="">

This is checkbox

</label>



<label for="option-two" class="pure-radio">

<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>

This is the Radio input 1

</label>



<label for="option-three" class="pure-radio">

<input id="option-three" type="radio" name="optionsRadios" value="option2">

This is the Radio input 2

</label>

</form>

</body>

</html>

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