pure-css
  1. pure-css-checkboxes-and-radios
PreviousNext

Pure CSS Checkboxes and Radios

Pure CSS offers easy and customizable styling options for checkboxes and radio buttons, allowing you to add style to these form elements without the need for extra JavaScript or CSS code.

Use

Checkboxes and radio buttons are commonly used form elements in web development, but they can often look dull and unappealing. Pure CSS provides easy-to-use classes for styling these elements, making them more visually appealing and easier to use.

Advantage

One of the main advantages of using Pure CSS for checkboxes and radio buttons is its simplicity. With Pure CSS, you can easily style these elements without adding any additional JavaScript or CSS code, which can save you development time and resources.

Example

Here's an example of using Pure CSS to style a checkbox and radio button.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pure CSS Checkboxes and Radios</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/forms-min.css">
    </head>
    <body>
        <form class="pure-form">
            <fieldset>
                <legend>Choose your favorite color:</legend>

                <label for="red" class="pure-checkbox">
                    <input id="red" type="checkbox">Red
                </label>

                <label for="blue" class="pure-checkbox">
                    <input id="blue" type="checkbox">Blue
                </label>

                <label for="green" class="pure-checkbox">
                    <input id="green" type="checkbox">Green
                </label>

                <legend>Choose your gender:</legend>

                <label for="male" class="pure-radio">
                    <input id="male" type="radio" name="gender">Male
                </label>

                <label for="female" class="pure-radio">
                    <input id="female" type="radio" name="gender">Female
                </label>
            </fieldset>
        </form>
    </body>
</html>
Try Playground

In this example, we use the pure-checkbox and pure-radio classes to style the checkboxes and radio buttons respectively. We also include the necessary CSS files from the Pure CSS CDN to ensure that the styles are applied correctly.

Summary

Pure CSS makes it easy to add custom styles to checkboxes and radio buttons without the need for extra CSS or JavaScript code. This can save you time and resources while still allowing you to create visually appealing and user-friendly forms for your website or application. Try it out for yourself!

Rounded InputsInput Sizing
Published on: