利用CSS 修改input=radio的默认样式(改成选择框)

2019-03-01 来源: rachelch 发布在  https://www.cnblogs.com/rachelch/p/10454780.html

html部分:

<input id="item2" type="radio" name="item">
<label for="item2"></label>

abel for属性规定与表单元素绑定
radio单选框, 相同的name名字可以达到互斥的作用

CSS部分:

input[type="radio"] {
     opacity:; //设置透明度,隐藏原有input样式
}
label {
     position: absolute;
     left: 90%;
     top: 10px;
     width: 20px;
     height: 20px;
     border: 1px solid #999;
}
input:checked+label { 相邻同胞选择器,选择被选中的input标签后  第一个label标签 [input  和 label标签有共同的父元素];
     background-color: #ff3334;
     border: 1px solid #ff3334;
}

css样式会应用在紧随着 "勾选的input元素" 后面(同级)的 " label元素的:after "上。
也就是说,input框如果被用户勾选了,其后面的label元素会有相应的样式变化

input:checked+label::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 10px;
  top: 3px;
  left: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

实现效果:

参考文章: https://www.jianshu.com/p/d3ad2d76f039

相关文章