去掉radio单选按钮的默认样式

最新推荐文章于 2023-12-13 15:32:43 发布

原创最新推荐文章于 2023-12-13 15:32:43 发布 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#去掉radio默认样式 #radio单选按钮

html+css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种修改HTML中Radio单选按钮默认样式的CSS方法，通过隐藏原生按钮并用自定义图标替代，实现与网站主色调一致的美观效果。

在实际项目中radio单选按钮的默认样式是很讨厌的很多地方用了跟主色调不一样很突兀我在网上查了查自己改了一个

<dd>
    <label>
	    <input type="radio" checked="checked" name="classId" class="radio" value="1"> 商品咨询
		<i></i>
	</label> 
	<label> 
		<input type="radio" name="classId" class="radio" value="2"> 支付问题
		<i></i>
	</label> 
	<label> 
		<input type="radio" name="classId" class="radio" value="3"> 发票及保修
		<i></i>
	</label>
</dd>

css

label {
    font-size: 12px;
    vertical-align: top;
    display: flex;
    margin-right: 20px;
    float: left;
    position: relative;
    font-weight: 400;
    color: #0c4757;
    padding-left: 25px;
    cursor: pointer;
}
label .text { display: inline-block; vertical-align: middle; padding: 2px 4px;}
label .radio {
    position: absolute;
    left: -9999px;
}
label .radio i {
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 15px;
    height: 15px;
    outline: 0;
    border: 1px solid #e4e4e4;
    background: #ffffff;
    border-radius: 50%;
    transition: border-color .3s;
    -webkit-transition: border-color .3s;
}

label input + i:after {
    position: absolute;
    content: '';
    top: 2px;
    left: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border:1px solid #e5e5e5;
}

label input:checked + i:after{
    border:1px solid #333;
    background-color: #333;
}

最终效果是这样的