QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

css基础

纯CSS美化radio和checkbox

 admin  2022-09-09 11:48:08
通过CSS3来实现将radio和checkbox美化的效果。可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试)。然后微信端和QQ端訪问也是正常。因为LZ所做的功能正好仅仅须要在微信端展示,所以并未深入研究。

当然,尽管说不能兼容,可是对于为什么不能兼容还是须要解释一下的,其关键在于这么个选择器的问题:input[type=radio]:before。:beofre这个伪类选择器在主流浏览器中能够在P,span,div等标签插入一些式样,可是在input中就不行,索性chrome支持这一特性,而本实例也正是环绕着一特性进行开发。

其它不多说,直接上代码和截图。

效果截图:

HTML代码:

 

<label for="test1">Test for test1 </label>
        <input class="radio" type="radio" ID="test1" name="test" value="test1"/>
        <label for="test2">Test for test2 </label>
        <input class="radio" type="radio" ID="test2" name="test" value="test2"/>

        <br>
        <br>
        <br>
        <label for="check1">check1</label>
        <input id="check1" name="check"  value="check1" type="checkbox" class="checkbox"/>
        <label for="check2">check2</label>
        <input id="check2" name="check" value="check2" type="checkbox" class="checkbox"/>
        <label for="check3">check3</label>
        <input id="check3" name="check" value="check3" type="checkbox" class="checkbox"/>
        <label for="check4">check4</label>
        <input id="check4" name="check" value="check4" type="checkbox" class="checkbox"/>

然后再是CSS代码:
input[type=radio]{
            font-size:1em;
            visibility: hidden;
            position: relative;
            display: inline-block;
            width: 1em;
            height: 1em;
        }
        input[type=radio]:before{
            font-size:1em;
            top:12%;
            display: inline-block;
            position: absolute;
            content:' ';
            visibility: visible;
            height: 1em;
            width: 1em;
            display: block;
            background: url("../img/no.png") no-repeat;
            background-size: 1em 1em;
        }
        input[type=radio]:checked:before{
            font-size:1em;
            content:' ';
            visibility: visible;
            height: 1em;
            width: 1em;
            background: url("../img/yes.png") no-repeat;
            background-size: 1em 1em;
        }

        input[type=checkbox]{
            font-size:1em;
            visibility: hidden;
            position: relative;
            display: inline-block;
            width: 1em;
            height: 1em;
        }
        input[type=checkbox]:before{
            top:12%;
            display: inline-block;
            position: absolute;
            content:' ';
            visibility: visible;
            height: 1em;
            width: 1em;
            display: block;
            background: url("../img/checkbox_no.png") no-repeat;
            background-size: 1em 1em;
        }
        input[type=checkbox]:checked:before{
            content:' ';
            visibility: visible;
            height: 1em;
            width: 1em;
            background: url("../img/checkbox.png") no-repeat;
            background-size: 1em 1em;
        }


本文转自:https://www.cnblogs.com/cynchanpin/p/7224179.html
¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《纯CSS美化radio和checkbox》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/css/910.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序