美化表单单选按钮的样式

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/101289747

作者：hu_time
描述：自定义input单选按钮的样式
例子中改变的是单选框的样式，多选框同理。改变属性即可

html:

<div>
     请选择性别：
     <label class="radio-item">
         <!-- 默认的按钮 -->
         <input name="gender" type="radio">
         <!-- 自定义的按钮 -->
         <span class="radio"></span>
         <span>男</span>
     </label>
     <label class="radio-item">
         <!-- 默认的按钮 -->
         <input name="gender" type="radio">
         <!-- 自定义的按钮 -->
         <span class="radio"></span>
         <span>女</span>
     </label>
 </div>

css:

        /* 自己写的未点击的按钮样式 */
     .radio-item .radio{
         display: inline-block;
         width:12px;
         height: 12px;
         border: 1px solid #999;
         border-radius: 50%;
         cursor: pointer;
     }
     /* 点击按钮的边框颜色 */
     .radio-item input:checked+.radio{
         border-color: #008c8c;
     }
     /* 点击的文本 */
     /* ~ 代表后续兄弟选择器，选取所有指定元素之后的相邻兄弟元素。 */
     .radio-item input:checked~span{
         color:#008c8c;
     }
     /* 按钮内部的小圆点 */
     /* + 相邻兄弟选择器，可选择紧接在另一元素后的元素，且二者有相同父元素。 */
     .radio-item input:checked+.radio::after{
         content: "";
         display: block;
         width: 5px;
         height: 5px;
         background: #008c8c;
         margin-left: 3.5px;
         margin-top: 3.5px;
         border-radius: 50%;
     }
     /* 隐藏原来的input单选框 */
     .radio-item input[type="radio"]{
         display:none;
     }