Open In App

Pure CSS Inputs

Improve
Improve
Like Article
Like
Save
Share
Report

Inputs are important in any webpage form. It is used to take various inputs from the user which are essential in collecting data or information.

Following are the various types of inputs in Pure CSS:

  • Required Inputs
  • Disabled Inputs
  • Read Only Inputs
  • Rounded Inputs
  • Checkboxes and Radios

Required Inputs: If you want to mark a form control as required add the “required” attribute to the  <input> element. Suppose your form needs a phone number then you can use this attribute to show that a phone number is required.

Syntax:

<form class="pure-form">  
    <input type="…" placeholder="……" required>  
</form>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" 
    href=
    integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
    crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Required Inputs</h1>
  
    <!--Required input-->
    <form class="pure-form">
        <input type="tel" 
        placeholder="Requires a phone number" 
        required>
    </form>
</body>
  
</html>


Output:

Disabled Inputs: If you don’t want to take any input from the user you can use disabled inputs. Add the “disabled” attribute to the <input> element to disable form control.

Syntax:

<form class="pure-form">
    <input type="…" placeholder="……" disabled="">
</form>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
      crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Disabled Inputs</h1>
  
    <!--Disabled input-->
    <form class="pure-form">
        <input type="text" 
        placeholder="This input is disabled.." 
        disabled="" />
    </form>
</body>
  
</html>


Output:

Read-only Inputs: If you want to make a form input only readable, then you can use read only inputs. The major difference between read-only and disabled inputs is disabled inputs are not interactive whereas in read-only inputs you can interact with the input and select its text. Hence they are still focusable. Add “readonly” attribute to <input> element to create read-only inputs.

Syntax:

<form class="pure-form">  
    <input type="…" value="……" readonly>  
</form>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Import Pure CSS files -->
    <link rel="stylesheet" href=
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
      crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Read-only Inputs</h1>
  
    <!--Readable input-->
    <form class="pure-form">
        <input type="text"
         value="This input is readable.." readonly>
    </form>
</body>
  
</html>


Output:

Rounded Inputs: Add class name “pure-input-rounded” to the <input> element to display a form control with rounded corners. It can be used to create a search-box in your webpage.

Syntax:

<form class="pure-form">  
    <input type="…" class="pure-input-rounded">  
</form>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
    integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
    crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Rounded Inputs</h1>
  
    <!--Rounded Inputs-->
    <form class="pure-form">
        <input type="text" 
          class="pure-input-rounded">
        <button type="submit" 
          class="pure-button-primary">
          Search
        </button>
    </form>
</body>
  
</html>


Output:

Checkboxes and Radios: To normalize and align checkboxes and radioinputs  add the class “pure-checkbox” or “pure-radio” to the <label> element.

Syntax:

Checkbox:
<label for="..." class="pure-checkbox">  
    <input id="…" type="checkbox" value="">  
    . . .
</label>  
      
Radio-button:        
<label for="..." class="pure-radio">  
    <input id="…" type="radio" name="..." value="">  
    . . .
</label>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
      crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Checkboxes and Radio Inputs</h1>
    <form class="pure-form">
  
        <!--Checkbox-->
        <label for="firstOption" class="pure-checkbox">  
            <input id="firstOption"
                   type="checkbox" value="">  
                Click this checkbox  
        </label>
  
        <!--Radio buttons-->
        <label for="secondOption" class="pure-radio">  
            <input id="secondOption" type="radio" 
                   name="optionsRadios" value="option1" checked>  
                Click this radio button.  
        </label>
  
        <label for="thirdOption" class="pure-radio">  
            <input id="thirdOption" type="radio"
                   name="optionsRadios" value="option2">  
                ..Or this one!  
        </label>
    </form>
</body>
  
</html>


Output:



Last Updated : 10 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads