选中时更改单选按钮的边框颜色

我希望在选中时使用绿色边框包围绿色单选按钮。
这是我有：选中时更改单选按钮的边框颜色

input[type='radio'] { 
     -webkit-appearance: none; 
     width: 10px; 
     height: 10px; 
     border-radius: 50%; 
     outline: none; 
     box-shadow: 0 0 0 2px gray; 
    } 

    input[type='radio']:before { 
     content: ''; 
     display: block; 
     width: 60%; 
     height: 60%; 
     margin: 20% auto; 
     border-radius: 50%; 
    } 

    input[type='radio']:checked:before { 
     background: green; 
    } 

    .role { 
     margin-right: 80px; 
     margin-left: 20px; 
     font-weight: normal; 
    } 

    .checkbox label { 
     margin-bottom: 20px !important; 
    } 

    .roles { 
     margin-bottom: 40px; 
    }

而且模板：

<div class="roles"> 
    <input type="radio" name="role" value="ONE" id="one"> 
    <label class="role" for="one">ONE</label> 
    <input type="radio" name="role" value="TWO" id="two"> 
    <label class="role" for="two">TWO</label> 
</div>

这里是一个的jsfiddle：Demo

就像你可以看到border-color从不变为绿色......我试过添加border-color属性无济于事......我该怎么办？

谢谢！

来源

2017-04-24 Anna

你可能在这里:) http://stackoverflow.com找到一个解释/ questions/4253920 /我如何改变单选按钮的颜色 –

这个：h ttp：//stackoverflow.com/questions/10849626/putting-css-borders-around-radio-buttons –

可能重复[边界周围的标签，如果广播被选中]（http://stackoverflow.com/questions/12150784/border -around-label-if-radio-is-checked） – k185

嘿伙计你需要检查你的CSS。你得到的边框是由箱形阴影而不是边框创建的：

这里是一个工作的小提琴。有乐趣

input[type='radio'] { 
 
     -webkit-appearance: none; 
 
     width: 20px; 
 
     height: 20px; 
 
     border-radius: 50%; 
 
     outline: none; 
 
     border: 3px solid gray; 
 
    } 
 

 
    input[type='radio']:before { 
 
     content: ''; 
 
     display: block; 
 
     width: 60%; 
 
     height: 60%; 
 
     margin: 20% auto; 
 
     border-radius: 50%; 
 
    } 
 

 
input[type="radio"]:checked:before { 
 
     background: green; 
 
     
 
    } 
 
    
 
    input[type="radio"]:checked { 
 
     border-color:green; 
 
    } 
 

 
    .role { 
 
     margin-right: 80px; 
 
     margin-left: 20px; 
 
     font-weight: normal; 
 
    } 
 

 
    .checkbox label { 
 
     margin-bottom: 20px !important; 
 
    } 
 

 
    .roles { 
 
     margin-bottom: 40px; 
 
    }

<div class="roles"> 
 
    <input type="radio" name="role" value="ONE" id="one"> 
 
    <label class="role" for="one">ONE</label> 
 
    <input type="radio" name="role" value="TWO" id="two"> 
 
    <label class="role" for="two">TWO</label> 
 
</div>

来源

2017-04-24 13:27:08 RacoonOnMoon

谢谢！那就是它:) – Anna

没问题:) :) – RacoonOnMoon

你可以只更新box-shadow颜色：

input[type='radio'] { 
 
    -webkit-appearance: none; 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 50%; 
 
    outline: none; 
 
    box-shadow: 0 0 0 2px gray; 
 
} 
 

 
input[type='radio']:checked { 
 
    box-shadow: 0 0 0 2px green; 
 
} 
 

 
input[type='radio']:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 60%; 
 
    height: 60%; 
 
    margin: 20% auto; 
 
    border-radius: 50%; 
 
} 
 

 
input[type='radio']:checked:before { 
 
    background: green; 
 
} 
 

 
.role { 
 
    margin-right: 80px; 
 
    margin-left: 20px; 
 
    font-weight: normal; 
 
} 
 

 
.checkbox label { 
 
    margin-bottom: 20px !important; 
 
} 
 

 
.roles { 
 
    margin-bottom: 40px; 
 
}

<div class="roles"> 
 
    <input type="radio" name="role" value="ONE" id="one"> 
 
    <label class="role" for="one">ONE</label> 
 
    <input type="radio" name="role" value="TWO" id="two"> 
 
    <label class="role" for="two">TWO</label> 
 
</div>

来源

2017-04-24 13:29:16 sol

没错，我误解了'box-shadow'是如何工作的。谢谢！ – Anna

选中时更改单选按钮的边框颜色

回答

相关问题