如何将填充添加到选中的单选按钮 css答案

【问题标题】：How to add padding to checked radio button css如何将填充添加到选中的单选按钮 css
【发布时间】：2023-02-10 11:16:21
【问题描述】：

嗨 Dev's 我正在尝试在选中后向我的单选按钮添加填充。

我将此代码用于单选按钮

<form class="cool">
<input role="radio" type="radio" id="d_sample" class="no-dd" name="rp_select" onclick="shout(this)">
<label for="d_sample">

<input role="radio" type="radio" id="d_admple" class="no-dd" name="rp_select" onclick="shout(this)">
<label for="d_admple">
</form>

和CSS

.cool input{
display:inline-block;   
position:relative;
box-sizing: border-box;
height: 13px;
width: 13px;
border: 0.8px solid #121a21;
border-radius: 100%;
cursor:pointer;
background:transparent;
}
.cool input[type=radio]:checked{    
box-sizing: border-box;
height: 13px;
width: 13px;
border: 0.8px solid #121a21;
border-radius: 100%;
cursor:pointer;
overflow: visible;
background:#121a21;
}

和JS

<script>
function shout(e){
$(".no-dd").removeAttr("checked");  
var radio_value = $(e).attr("id");
$("#"+radio_value).attr("checked","true");
}
</script>

样式后的单选按钮默认是这个（未选中）

上面的代码在检查后给了我这个

但我想要的是这个

我如何着手实现我想要的，这是最后一张图片。

【问题讨论】：

我检查了你的代码，单选按钮在 chrome 和 firefox 中看起来不错。 link。你使用的是什么浏览器？你能添加一个工作示例吗？

标签： html css

【解决方案1】：

.cool input[type=radio]:checked {    
    box-sizing: border-box;
    height: 13px;
    width: 13px;
    border: 1px solid #FFFFFF;
    outline: 0.8px solid #121a21;
    border-radius: 50%;
    cursor:pointer;
    overflow: visible;
    background:#121a21;
}

给白色边框并添加带有轮廓参数的圆圈。

【讨论】：