CSS3特效-自定义radio

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:2547

{}
自定义checkbox样式\n\n\n效果图:\n\n代码\n\n// css\n.radio {\n\tdisplay: none;\n}\n.radio+label {\n\tdisplay: inline-block;\n\tposition: relative;\n}\n\n.radio+label {\n\tpadding-left: 20px;\n\tbox-sizing: border-box;\n}\n.radio+label:...

目录

自定义checkbox样式

效果图: 在这里插入图片描述 代码

// css
.radio {
    display: none;
}
.radio+label {
    display: inline-block;
    position: relative;
}

.radio+label {
    padding-left: 20px;
    box-sizing: border-box;
}
.radio+label:before{
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 0px;
}
.radio+label:before {
    width: 18px;
    height: 18px;
    left: 0px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="9" r="7" transform="translate(1 -1)" fill="#FFF" stroke="#D9DBD9"></circle></svg>');
}

.radio[type=radio]:checked+label:before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><g transform="translate(2 2)" fill="none"><circle stroke="#C0E6FF" stroke-width="2" fill="#09F" cx="7" cy="7" r="8"></circle><circle fill="#FFF" cx="7" cy="7" r="2"></circle></g></svg>');
}
//使用
<h2>radio</h2>
   <div>
      <input id="label1" class="radio" type="radio" name="sex" checked>
      <label for="label1">男</label>
      <input id="label2" class="radio" type="radio" name="sex">
      <label for="label2">女</label>
   </div>

原文地址:https://blog.csdn.net/tian_tian_gong/article/details/86649754?ops_request_misc=&request_id=86e809fea7e5438eb011285d686a4b82&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-8-86649754-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/c491c320f5c84ef28a54545bfae6edd3

打赏作者

本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复