Pure.CSS Checkboxex and Radios Inputs

Pure.CSS Checkboxes and Radios

The "pure-checkbox" and "pure-radio" classname are used to normalize and align checkboxes and radio inputs.

Example:

Let's take an example to see a checkbox and a radio button.

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

<form class="pure-form">
    <label for="option-one" class="pure-checkbox">
        <input id="option-one" type="checkbox" value="">
       This is a checkbox
    </label>

    <label for="option-two" class="pure-radio">
        <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
        This is 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>
</html>

Test it Now

Output: