java单选框的值 java单选框代码

表单中input[type=“radio”]的样式在不同的浏览器中表现也不一样，如果直接对单选按钮设置样式的话，没有多少样式能够对单选按钮起作用。

为了用户体验或者需要更改单选按钮的样式可使用此方法：

一般使用单选按钮会搭配元素使用并将关联起来，可以为元素添加生成伪元素，并基于单选按钮的状态来为其设置样式，并将真正的按钮隐藏

1.一个基本的单选按钮

女
男
此时的样式

2.生成一个伪元素，设置自己想要的样式

input[type="radio"]+label::before {
content: "\a0";/*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 7px;
height: 7px;
margin: auto 5px;
border-radius: 50%;
border: 1px solid gray;
padding: 4px;
}
/* 设置选中样式 */
input[type="radio"]:checked+label::before {
background-color: gray;
background-clip: content-box;
padding: 4px;
}

添加以上代码后的样式

3.隐藏原来的单选按钮

input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}

效果为：