作者: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;
}
来源:CSDN
作者:hu_Time
链接:https://blog.csdn.net/hu_Time/article/details/101289747