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. <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 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 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.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 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 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