Home > Web Front-end > CSS Tutorial > Optimize the styles of radio buttons and check boxes

Optimize the styles of radio buttons and check boxes

php中世界最好的语言
Release: 2018-03-21 16:58:24
Original
2190 people have browsed it

This time I will bring you the styles of optimizing radio buttons and check boxes. What are the precautions for optimizing the styles of radio buttons and check boxes? The following are Let’s take a look at practical cases. 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>
Copy after login
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;
}
Copy after login
I believe I saw it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Unpopular CSS properties you don’t know


What are href, src, link and @import? the difference

The above is the detailed content of Optimize the styles of radio buttons and check boxes. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template