Pure.CSS Input Sizing Form

by Online Tutorials Library July 14, 2022

Input Sizing Form

You can specify input elements in the form having fluid width size. It is similar to pure-grid. You have to specify a pure-input-* class to these elements.

Example

 <!DOCTYPE html> <html>  <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”>  <form class=”pure-form”>     <input class=”pure-input-1″ type=”text” placeholder=”This box is full.”><br>     <input class=”pure-input-2-3″ type=”text” placeholder=”This box is 2/3.”><br>     <input class=”pure-input-1-2″ type=”text” placeholder=”This box is half.”><br>     <input class=”pure-input-1-3″ type=”text” placeholder=”This box is 1/3.”><br>     <input class=”pure-input-1-4″ type=”text” placeholder=”This box is 1/4.”><br>  </form> </html> 

Test it Now

Output:

Next TopicPure.CSS Tables

Pure.CSS Input Sizing Form

Input Sizing Form

Asserts in Postman

Python Wand library

You may also like