css美化checkbox和radio标签

最新推荐文章于 2022-09-15 19:46:35 发布

独行侠梦

最新推荐文章于 2022-09-15 19:46:35 发布

阅读量2.7k

点赞数

分类专栏：网页html-css 文章标签： css标签美化

本文链接：https://blog.csdn.net/u012811805/article/details/79053979

版权

网页html-css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

有时候可能需要自己来美化一些标签，这里做下记录，方便以后查找。

效果

checkBox美化

radio美化

checkbox标签美化

 input[type=checkbox]:after  {
        content: "";
        display:block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 14px;
        font-size: 16px;
        color: #fff;
        border: 2px solid #ddd;
        background-color: #fff;
        box-sizing:border-box;
    }

    input[type=checkbox]:checked:after  {
        content: '\2714';
        background-color: #5774FF;
    }

radio美化

input[type=radio]:after  {
    content: "";
    display:block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 14px;
    font-size: 16px;
    color: #fff;
    border: 2px solid #ddd;
    background-color: #fff;
    box-sizing:border-box;
    position: relative;
    left: -2px;
}

input[type=radio]:checked:after  {
    content: "";
    transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
    -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
    border: 4px solid #5774FF;
}