通常UI给出的按钮样式需要自己来写,如图
单选按钮选中与未选中状态样式
给的新样式一般都用选择器:before覆盖之前的样式,在此基础上再编写新的样式。
radio样式编写借鉴了 自定义input[type="radio"]的样式这篇文章,写的很好,非常详细,大家可以看一下。
checkbox是自己写的,css稍微有些不严谨,但效果实现了,稍微有一小点儿瑕疵,如果有更好更简单的方法,欢迎大家踊跃发言。
1.首先将之前的样式抹掉,利用定位将默认的框覆盖住,一定要有背景颜色
input[type='checkbox']:before{
content: "";
position: absolute;
width: 17px;
height: 17px;
top: 2px;
left: 78px;
bottom: 0;
background: #fff;
box-sizing: border-box;
}
2.然后给checkbox新的样式
input[type='checkbox']{
width: 15px;
height: 16px;
border: 1px solid #e3e3e3;
margin-left: 80px;
}
3.最后将选中状态的背景替换一下
input[type='checkbox']:checked::before {
width: 17px;
height: 17px;
background: url(../img/duigou.jpg) no-repeat center;
border: none;
}
有两点需要注意:①background用到的图片背景颜色不能为透明,UI切图的时候我让她连边框一起切到一张图了;②步骤2的width加上外边框是16px,比设定的17px小,这是因为如果二者正好是17px的话会导致出现这种情况
image.png
右侧边框处出现了默认checkbox的样式,所以需要步骤2的width宽度小一些,另外步骤1里的top,left值可能也需要微调,才能实现完美覆盖,如果单纯使用定位来覆盖,可能效果不太完美,这一点就稍微有点麻烦。
网友评论