我是打算放个图片,然后checkbox定位上去设置为透明,你们都是怎么做这种的,求哥哥指导一下
一般的做法是这样:
<label>
<input type=checkbox>
<span></span>
</label>
样式:
input {display: none}
input+span {未选中样式}
input:checked+span {选中后的样式}
手机打不出反引号,见谅
之前刚好做了一个,我用的不是图标,是自己绘制的,和楼上上的方法一样
效果图是这样,你可以自己修改颜色啥的:
代码如下,直接复制就可以实现了:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.label{position: relative;}
.input{display:none}
.span{display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}
.input:checked+.span:after{
content: "";
position: absolute;
width: 9px;
height: 4px;
border: 2px solid #fd8845;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);}
</style>
</head>
<body>
<div>
<label class="label">
<input class="input" type="checkbox" name="">
<span class="span"></span>
</label>
</div>
</body>
</html>
也可以看看我总结的步骤:
改变checkbox和radio的默认样式
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
更换了一种可以兼容大多数浏览器的方法
以下方法只兼容chrome,firefox,360等,ie版本不兼容,适用于web端
用伪类,具体样式可以自己调整