選中時更改單選按鈕的邊框顏色

我希望在選中時使用綠色邊框包圍綠色單選按鈕。
這是我有：選中時更改單選按鈕的邊框顏色

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

選中時更改單選按鈕的邊框顏色

回答

相關問題