HTML+CSS to realize beautiful style radio buttons and check boxes

Radio buttons and check boxes are functions required by the front end. This article mainly introduces HTML+CSS to achieve beautiful styles of radio buttons and check boxes. Friends in need can refer to it. I hope it can help everyone complete a more beautiful design. Styled radio buttons and check boxes.

1. Background image

html

<p class="check-wrappers">
    <span class="c-checkbox checked">
        <input type="radio" autocomplete="off" name="type" style="display:none;" value="1" checked="checked">
    </span>
    <span></span>
</p>

css

.cart-checkbox.checked {
    background-position: -29px 0;
}
.c-checkbox {
    display: block;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    background: url(/shop-cart.png) no-repeat 0 0;
    background-size: 60px 120px;
}

Have you all learned it? Hurry up and give it a try.

Related recommendations:

Detailed examples of using css to implement radio buttons and check boxes

js and jquery respectively Validate radio buttons, check boxes, drop-down boxes_javascript skills

Pure Css code to beautify checkbox checkbox, radios radio button and sliding button simple method

The above is the detailed content of HTML+CSS to realize beautiful style radio buttons and check boxes. For more information, please follow other related articles on the PHP Chinese website!