Pure CSS Form Input Type

Pure CSS form Input type elements are used to build HTML forms. An HTML form contains the following input elements such as text fields, checkboxes, radio buttons, submit buttons, etc.

Pure CSS Input Sizing

Pure CSS form elements have fluid width sizes. It width can be controlled using the class pure-input-* class where * refers to fraction of width.

General Syntax

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

Try it now

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <form class="pure-form">
      <input type="text" class="pure-input-1" placeholder=".pure-input-1" />
      <br />
      <input type="text" class="pure-input-2-3" placeholder=".pure-input-2-3" />
      <br />
      <input type="text" class="pure-input-1-2" placeholder=".pure-input-1-2" />
      <br />
      <input type="text" class="pure-input-1-3" placeholder=".pure-input-1-3" />
      <br />
      <input type="text" class="pure-input-1-4" placeholder=".pure-input-1-4" />
      <br />
    </form>
  </div>
  <!-- /pure-u-sm-1-2-->
</div>
<!--/pure-g-->

Try it now

Source Code : Output

Pure CSS Form Input Type

Pure CSS Input Sizing

Web Tutorials