温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css如何绘制checkbox,radio

发布时间:2022-03-10 09:51:19 阅读:130 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍了css如何绘制checkbox,radio,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

 

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复选框效果</title>
    <style>
        form{border1px solid #ccc;padding20px;width300px;margin30px auto;}
        .wrapper{margin-bottom10px;}
        .box{display: inline-block;position: relative;width20px;height20px;border2px solid orange;}
        .box input{position: absolute;top0;left0;top: -3px;left: -4px;width21px;height21pxopacity0;cursor: pointer;z-index5; }
        .box span{position: absolute;top1pxright6px;font-size19px;font-weight: bold;font-family: Arial; -webkit-transformrotate(18deg); -moz-transformrotate(18deg); -ms-transformrotate(18deg); -o-transformrotate(18deg); transformrotate(18deg);color: orange;}
        input[type="checkbox"]+span{opacity0;}
        input[type="checkbox"]:checked+span{opacity1;}
    </style>
</head>
<body>
<form action="#">
    <div>
        <div>
            <input type="checkbox" checked id="userName" /><span>&radic;</span>
        </div>
        <label for="userName">我是选中状态</label>
    </div>
    <div>
        <div>
            <input type="checkbox" id="userNum" /><span>&radic;</span>
        </div>
        <label for="userNum">我是未选中状态</label>
    </div>
</form>
 
</body>
</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“css如何绘制checkbox,radio”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×