选中时使用单选按钮样式 [英] Issue with radio button styling when checked

问题描述

我的单选按钮有问题，我试图在检查时放置边框颜色，没有任何反应。我尝试阅读关于它的其他主题，甚至尝试粘贴我找到的答案，但它仍然不会改变边框。
这可能是我犯的一个愚蠢的错误，但我找不到它，有人有答案吗？
非常感谢。

input [type =radio ]：checked：{background = green;} input [type =radio]：checked {border-color：orange;}

 < div id =radio> <标签> < input type =radioname =sexevalue =Hommeid =homme> Homme< / label> <标签> < input type =radioname =sexevalue =Femmeid =femme> Femme< / label>< / div>  

解决方案

你无法真正改变基本单选按钮的风格。
您必须创建一个自定义单选按钮css。
试试这个CSS：

  input [type ='radio'] {
 -webkit-appearance：没有; 
 width：20px; 
 height：20px; 
 border-radius：50％; 
概述：无; 
 border：3px纯灰色; 
} 
 
 input [type ='radio']：before {
 content：''; 
 display：block; 
宽度：60％; 
身高：60％; 
保证金：20％汽车; 
 border-radius：50％; 
 
 
 input [type =radio]：checked：before {
 background：green; 
 
} 
 
 input [type =radio]：checked {
 border-color：orange; 
} 
  

它适用于我。我希望我能帮上忙。

I have an issue with my radio buttons, I try to put a border color when it is checked, nothing happens. I tried to read other topics about it, even tried to paste the answers I've found but it still doesn't change the border. It's probably some silly mistake that I made but I just can't find it, does anyone have the answer? Thanks a lot.

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

input[type="radio"]:checked {
  border-color: orange;
}

<div id="radio">
     <label>
        <input type="radio" name="sexe" value="Homme" id="homme">
        Homme
    </label>
    <label>
        <input type="radio" name="sexe" value="Femme" id="femme">
        Femme
    </label>
</div>

解决方案

You can not really change the style of basic radio button. You have to create a custom radio button css. Try this 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: orange;
}

It works for me. I hope I can help.

这篇关于选中时使用单选按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！