css控制单选按钮 |idea css 报错

input[type="radio"] {
/*去掉默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*设置宽高,相当于外层容器*/
width: 20px;
height: 20px;
/*设置边框*/
border: 2px solid #ccc;
border-radius: 50%;
/*设置背景色*/
background-color: #fff;
/*设置选中状态下的背景色*/
&:checked {
background-color: #007bff;
}
}

上面的代码中，大家首先去掉了默认的样式，然后设置了单选按钮的宽高、边框和背景色。在选中状态下，大家再设置了背景色，这样就可以达到更好的可视化效果。

当然，如果大家想要单选按钮更加个性化，还可以添加一些其他的样式，比如修改选中状态下的颜色、添加动画效果等。

input[type="radio"] {
/*去掉默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*设置宽高,相当于外层容器*/
width: 20px;
height: 20px;
/*设置边框*/
border: 2px solid #ccc;
border-radius: 50%;
/*设置背景色*/
background-color: #fff;
/*添加动画效果*/
transition: all 0.3s ease;
/*设置选中状态下的背景色和边框颜色*/
&:checked {
background-color: #007bff;
border-color: #007bff;
}
/*添加hover效果，鼠标悬浮时的样式*/
&:hover {
border-color: #007bff;
}
}

上面的代码中，大家添加了动画效果和hover效果，使单选按钮更加个性化和醒目。此外，大家还修改了选中状态下的颜色和边框颜色，以适应不同的设计需求。

总的来说，通过使用CSS来控制单选按钮的样式，大家可以使其更加美观、符合设计需求，并且提升用户体验。