input type=“radio“ 修改单选按钮默认样式

lmy_loveF

已于 2022-05-26 15:16:25 修改

阅读量1.6k

点赞数

分类专栏： C# 文章标签： html

于 2022-05-26 14:48:39 首次发布

本文链接：https://blog.csdn.net/lmy_loveF/article/details/124984388

版权

C# 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

改为：

1，给input 标签增加 class="radio_type" style="border:none;top:0px;"

 <input type="radio"  name="<%=sci_id %>" value="<%=ssoi_id %>" class="radio_type"  style="border:none;top:0px;" sort="<%=d %>"/>

2，在css 中增加 radio_type 样式

.radio_type{
    width: 20px;
    height: 20px;
    appearance: none;
	-webkit-appearance: none;
	outline: none;
    position: relative;
}
.radio_type:before{
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #7d7d7d;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:before{
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid red;
    background:red;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:after{
    content: '';
    width: 10px;
    height:5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 6px;
    left:5px;
    vertical-align: middle;
    transform: rotate(-45deg);
}
.radio_type:checked+label{
    color: red;
}