html radio 样式,2018-05-16利用CSS 修改input=radio的默认样式(选择框)

html部分:

label   for属性规定与表单元素绑定

radio单选框, 相同的name名字可以达到互斥的作用。

checkbox多选框

ckecked默认被选择

CSS部分:

input[type="radio"] {

opacity: 0;              设置透明度，隐藏原有input样式

}

label {

position: absolute;

left: 90%;

top: 10px;

width: 20px;

height: 20px;

border-radius: 50%;

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