Advertisement

Advertisement


Pure CSS Form Inputs

In this tutorial we will learn about various techniques and classes to stylize the input elemts of a form. An HTML form contains form elements like text fields, checkboxes, radio buttons, submit buttons, etc. We will use Pure CSS in these inputs and will observe the result.

Stylizing Form Inputs:

Purecss Grouped Inputs

You can diveide the form inputs into different groups. There appearance will give feeling of a group like the input elements of the same group will be separated from other group elements. Like in the example below, there is a group of text-based input elements and the other with rest of elements.
To make a group, wrap the input elements in a <fieldset> element with a pure-group class. You can see the example below to know exactly hoe to use these classes and tags.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Grouped Input </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <form class="pure-form"> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="Username"> <input type="text" class="pure-input-1-2" placeholder="Password"> <input type="email" class="pure-input-1-2" placeholder="Email"> </fieldset> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="A title"> <textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea> </fieldset> <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button> </form> </body> </html>

Output

Pure.CSS Grouped Input

Pure.CSS Input Sizing

Input elements also can be resized using the Pure CSS. There width can be customized by using the class pure-input-*, where the * will be replaced by a fraction. It is similar to set the width of the grids. Open the editor to do some changes in the example by yourself and observe the results.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Input Sizing </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <body> <form class="pure-form"> <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br><br> <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br><br> <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br><br> <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br><br> <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br><br> </form> </body> </html>

Output

Pure.CSS Input Sizing











Pure.CSS Read-Only Inputs

A read-only element is the one which is a bit like the disabled element but it still is focusable. Obviously you cannot change or write anything on this input element.
To make an input read-only, you have to use the read-only attribute with the input element. In the same way you can make an input element disable by using the disabled attribute. Try it.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Read Only </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <body> <form class="pure-form"> <input type="text" value="Readonly input here..." readonly> </form> </body> </html>

Output

Pure.CSS Read Only

Pure.CSS Rounded Inputs

Rounded corners gives a premium feel to the form. You can make an input element's corners round by using the pure-input-rounded class in it.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Rounded Inputs </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <body> <form class="pure-form"> <input type="text" class="pure-input-rounded"> <button type="submit" class="pure-button">Search</button> </form> </body> </html>

Output

Pure.CSS Rounded Inputs

Pure.CSS Checkboxes and Radios

Checkboxes and the Radio buttons, a very important part of the form should also be stylized a bit and guess what Pure gives you options for that. Use the classes pure-checkboxe and pure-radio with there respective input elements. If it's still not clear to you look at the example and see the use of these classes and observe the results.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Checkboxes and Radios </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <body> <form class="pure-form"> <label for="option-one" class="pure-checkbox"> <input id="option-one" type="checkbox" value=""> Here's option one. </label> <label for="option-two" class="pure-radio"> <input id="option-two" type="radio" name="optionsRadios" value="option1" checked> Here's a radio button. You can choose this one.. </label> <label for="option-three" class="pure-radio"> <input id="option-three" type="radio" name="optionsRadios" value="option2"> ..Or this one! </label> </form> </body> </html>

Output

Pure.CSS Checkboxes and Radios

Pure.CSS Form

Here is a basic form with different input elements. Have a look at it.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Form </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <body> <style> form{ margin: 20px; } </style> <body> <form class = "pure-form pure-form-aligned"> <fieldset> <div class = "pure-control-group"> <label for = "name">Username</label> <input id = "name" type = "text" placeholder = "Username" required> </div> <div class = "pure-control-group"> <label for = "email">Email</label> <input id = "email" type = "text" placeholder = "Email Address" required> </div> <div class = "pure-control-group"> <label for = "comments">Comments</label> <input id = "comments" type="text" placeholder = "Comments"> </div> <div class = "pure-controls"> <label for = "Free" class = "pure-checkbox"> <input id = "Free" type = "checkbox" checked = "checked"> Free </label> <label for = "Paid" class = "pure-checkbox"> <input id = "Paid" type = "checkbox"> Paid </label> <label for = "dontknow" class = "pure-checkbox"> <input id = "dontknow" type = "checkbox" disabled> Don't know (Disabled) </label> </div> <div class = "pure-controls"> <label for = "male" class = "pure-radio"> <input id = "male" type = "radio" name = "gender" value = "male" checked> Male </label> <label for = "female" class= "pure-radio"> <input id = "female" type = "radio" name = "gender" value = "female"> Female </label> <label for = "dontknow1" class = "pure-radio"> <input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled> Don't know (Disabled) </label> <button type = "submit" class = "pure-button pure-button-primary">Submit</button> </div> </fieldset> </form> </body> </html>

Output

Pure.CSS Form









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.