使用CSS3实现input多选框自定义样式的方法示例


Posted in HTML / CSS onJuly 19, 2019

原理:首先把input元素隐藏掉,然后用CSS设置label元素(其他元素也可以)的样式,选中时的样式使用input:check+label选中label,无须使用图片和JS

效果预览

使用CSS3实现input多选框自定义样式的方法示例

html代码

<div class="radio">
    <input type="checkbox" id="sex1">
    <label for="sex1"></label>
    男
</div>
<div class="radio">
    <input type="checkbox" id="sex2">
    <label for="sex2"></label> 女
</div>

CSS代码

.radio {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio input {
    width: 15px;
    height: 15px;
    appearance: none;/*清楚默认样式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    z-index: 8; /*让input层级高于label,使之能选中*/
    
}

.radio label {
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 15px;
    border: 1px solid #3582E9;
}

.radio input:checked+label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    /* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
    width: 5px;
    height: 12px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 #HTML / CSS
解决margin 外边距合并问题
Jul 03 #HTML / CSS
css3实现蒙版弹幕功能
Jun 18 #HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 #HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 #HTML / CSS
CSS3 分类菜单效果
May 27 #HTML / CSS
css3实现六边形边框的实例代码
May 24 #HTML / CSS
You might like
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
原生javascript实现连连看游戏
2019/01/03 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
python实现微信自动回复功能
2018/04/11 Python
Django 连接sql server数据库的方法
2018/06/30 Python
Python如何发布程序的详细教程
2018/10/09 Python
python安装scipy的方法步骤
2019/06/26 Python
Python验证码截取识别代码实例
2020/05/16 Python
怎么快速自学python
2020/06/22 Python
python实现猜拳游戏项目
2020/11/30 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
社团活动策划书范文
2014/01/09 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
租赁协议书范本
2014/04/22 职场文书
七夕活动策划方案
2014/08/16 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
女生抽烟检讨书
2014/10/05 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
搞笑老公保证书
2015/02/26 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
Nginx限流和黑名单配置
2022/05/20 Servers
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技