使用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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 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
php 删除cookie和浏览器重定向
2009/03/16 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python发送Email方法实例
2014/08/21 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python学习笔记之装饰器
2020/08/06 Python
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
医院总经理职责
2013/12/26 职场文书
聘用意向书范本
2014/04/01 职场文书
教师先进事迹材料
2014/12/16 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
pt-archiver 主键自增
2022/04/26 MySQL