Pure CSS Checkboxes and Radio Buttons
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.
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= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1>w3wiki</h1> <strong> Pure CSS Checkbox </strong> <form class="pure-form pure-form-stacked"> <fieldset> <strong> w3wiki 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= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1>w3wiki</h1> <strong> Pure CSS Radio Button </strong> <form class="pure-form pure-form-stacked"> <fieldset> <strong> w3wiki 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: