css如何设置radio居中显示,css设置radio不显示小圈

css设置radio不显示小圈选中变红

默认情况下，input的type为radio时会显示小圆圈，去除的方法很简单，只需要设置 input{-webkit-appearance:none;} 即可。

设置了input{-webkit-appearance:none;} 后，input就会消失不可见，input也就失效了，我们可以设置它的width和height属性让它显示出来，同时设置它的background和border来进行美化。

(相关课程推荐：css视频教程)

radio1

radio2

input[type="radio"]{

-webkit-appearance:none;

width: 16px;

height: 16px;

background: pink;

border-radius: 10%;

border: 4px solid skyblue;

}

input[type="radio"]:checked{

background: #000;

}

input[type="radio"]:checked + span{

color: red;

}

效果：