正文

input选择框默认样式修改

IP云
IP云V管理员/8 阅读
07/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

input选择框是无法直接修改样式，我们只能间接来改变它样式。

原理：用图片来代替原来的input选择框，原来的input选择框定位到图片上方并让它opacity为0，鼠标点击时用js来改变图片，这样从视觉上就完成了input选择框样式的修改

HTML

<i></i>
<input type="checkbox" />
我已阅读并接受<a href="">《***》</a>

CSS

i {
display: inline-block;
width: 1rem;
height: 1rem;
background: url(../img/user-xy-false.png) no-repeat;
background-size: cover;
vertical-align: sub;
}
input {
position: absolute;
left: -1.7rem;
top: -.2rem;
opacity:;
z-index:;
}

JS

用js来改变背景图片

//用户协议背景图
!(function(){var icon=document.querySelector(".user-xy i");
var choice=document.querySelector(".user-xy input");
choice.onclick=function(){
if(choice.checked){
icon.style.backgroundImage="url(img/user-xy-true.png)"
}else{
icon.style.backgroundImage="url(img/user-xy-false.png)"
}
} })()