使用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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 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的安全策略
2006/10/09 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
python如何将多个PDF进行合并
2019/08/13 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
adidas美国官网:adidas US
2016/09/21 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
高中军训感言800字
2014/03/05 职场文书
财务总监岗位职责
2014/03/07 职场文书
企业党员一句话承诺
2014/05/30 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
小学生作文评语集锦
2014/12/25 职场文书
党员争先创优承诺书
2015/01/20 职场文书
结婚老公保证书
2015/02/26 职场文书
公路施工安全责任书
2015/05/08 职场文书
男生贾里读书笔记
2015/06/30 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript