Pure.CSS Checkboxex and Radios Inputs

by Online Tutorials Library July 14, 2022

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:

PureCSS Inputs 5

Next TopicPure.CSS Form

Pure.CSS Checkboxex and Radios Inputs

Pure.CSS Checkboxes and Radios

Affinity Photo Vs. Photoshop

Basic Python for Java Developers

You may also like