Pure CSS Checkboxes and Radio Buttons
Last Updated :
18 Oct, 2021
In Pure CSS, we do not have any particular layout for Checkboxes and Radio Button type inputs. But we can use those types of inputs by using the Pure CSS classes. The below-mentioned classes are used for checkboxes and radio buttons.
- Checkbox: To use checkboxes, we can apply the input tag inside of a label tag and use the pure-checkbox class inside of the label tag.
- Radio Button: To use checkboxes, we can apply the input tag inside of a label tag and use the pure-radio class inside of the label tag.
Example 1: In this example, we will see the check box by Pure CSS. The below example illustrates the Check-box and Radio Button in Pure CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Checkbox</title>
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
</head>
<body>
<h1>GeeksforGeeks</h1>
<strong>
Pure CSS Checkbox
</strong>
<form class="pure-form pure-form-stacked">
<fieldset>
<strong>
GeeksforGeeks is the best
platform to get recognation
</strong>
<label class="pure-checkbox">
<input type="checkbox" id="multi-terms" />
I agreed with the statement.
<button type="submit"
class="pure-button pure-button-primary">
Subscribe
</button>
</fieldset>
</form>
</body>
</html>
|
Output:
Example 2: In this example, we will see the radio buttons.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Radio Button</title>
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
</head>
<body>
<h1>GeeksforGeeks</h1>
<strong>
Pure CSS Radio Button
</strong>
<form class="pure-form pure-form-stacked">
<fieldset>
<strong>
GeeksforGeeks is the best
platform to get recognation
</strong>
<label for="option-two" class="pure-radio">
<input id="option-two"
type="radio" name="gfg" checked>
Agree
</label>
<label for="option-three" class="pure-radio">
<input id="option-three"
type="radio" name="gfg" >
Disagree
</label>
<button type="submit"
class="pure-button pure-button-primary">
Subscribe
</button>
</fieldset>
</form>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...