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);

}

效果为：