美化表单——单选按钮

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

改变小圆点的样式：

html:

//按钮容器
<div class="zhifu-box">
     请选择支付方式：</br>
     <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:

.zhifu-box{
 width: 95%;
 margin: 0 auto;
 background-color: #fff;
 /* text-align: center; */
}

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

将单选框改为按钮形式：

html:

<div class="tuiguang-box">
<label >
		<input name="tuiguang" type="radio">
		<div class="tuiguang">推广礼包</div>
	</label>
	<label >
		<input name="tuiguang" type="radio">
		<div class="tuiguang">推广店铺</div>
	</label>
</div>

css:

.tuiguang-box{
	display: flex;
	height:5rem;
	width:100%;
}
.tuiguang-box label{
	height:100%;
	width: 30%;
}
/* 自己写的未点击的按钮样式 */
.tuiguang-box .tuiguang{
	margin-right: 1rem;
	height:100%;
	border:1px solid #dadada;
	background-color: #fafafa;
	border-bottom-color: #ccc;
	box-shadow: 0 1px 1px rgba(90, 90, 90, 0.1);
	padding: 0.5rem;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 2px;
 }
 /* 点击按钮的样式 */
 .tuiguang-box input:checked+.tuiguang{
	background-color: #428bca;
	color: #fff;
 }
 /* 隐藏原来的input单选框 */
 .tuiguang-box input[type="radio"]{
     display:none;
 }