Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!