将checkbox选中样式用图片替换

想在checkbox原先的样式上修改成以下样子比较困难，所以此处的主要思路是

关联一个span，通过checked来控制span的背景

代码如下

html部分

<label class="check_part"><inputtype="checkbox"class="hide_real"checked="checked"name="agreement_check"/><span class="check_fake"></span><span> 我已经仔细阅读过平台相关协议，并会遵守有关的法律法规</span></label>

style部分

.main .agreement .check_part {margin: 20px 0 20px 0;display: flex;justify-content: flex-start;position: relative;
}
.check_part .check_fake {display: inline-block;width: 34px;height: 34px;margin: 0;background: url('assets/checked_no.png') no-repeat;background-position: center;
}
.check_part span {height: 34px;line-height: 34px;margin-left: 10px;/* 文字不能选中 */-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.hide_real {position: absolute;left: -9999px;
}
.hide_real:checked + .check_fake {background: url('assets/checked.png') center no-repeat;
}

主要参考的文章是https://segmentfault.com/q/1010000015359727

这边文章与网上很多方法一样都是用到了伪元素，但其实直接更改背景即可，容易理解

将checkbox选中样式用图片替换相关推荐

微信小程序 - 更改radio和checkbox选中样式
点击下载源码:示例-更改radio或checkbox选中样式转载于:https://www.cnblogs.com/cisum/p/9761807.html
html5复选框怎么设置样式,html中关于checkBox选中样式设置
例如外卖服务区域,选择时为多选,且一般隐藏checkbox样式框.只留下label字体和设置的外边框来进行选中样式控制,以此来提高用户体验. 这时要对checkbox进行处理我总结的一个方法就是根据 ...
自定义checkbox选中样式
方案1:修改label的before html: <div class="custom-checkbox"><input id="checkbox&qu ...
安卓修改RadioButton圆圈样式（非直接图片替换）
用Android Studio做安卓开发的时候,使用RadioButton会有系统默认样式,比如:在unchecked状态下是黑色边框+空心圆样式:checked状态下是粉红色边框+中间一个粉红色原点 ...
radiobutton去除圆圈_安卓修改RadioButton圆圈样式（非直接图片替换）
用Android Studio做安卓开发的时候,使用RadioButton会有系统默认样式,比如:在unchecked状态下是黑色边框+空心圆样式:checked状态下是粉红色边框+中间一个粉红色原点 ...
uni-app checkbox限制选中数量移除选中样式
<uni-popup ref="carType" type="bottom"><uni-card class="content-ca ...
CSS样式，雪碧，图片替换，渐变小析
Css基础2: 相对长度单位:em,rem,px,% 绝对长度单位:厘米等(不用) 颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数 ...
复选框checkbox自定义样式
纯CSS实现复选框自定义样式 1.去掉默认样式 2.第一种方式:用图片实现 3.第二种方式:用字体图标实现 1.去掉默认样式 input[type=checkbox]{appearance:none; ...
checkbox自定义样式
checkbox自定义样式 1 1 常见的自定义样式是改变checkbox的button图片,但是他的需求是去掉checkbox的选项框,使checkbox的样式类似button.我最初给的建议是使用 ...

将checkbox选中样式用图片替换

将checkbox选中样式用图片替换相关推荐

最新文章

热门文章