如何自定义html中的单选按钮

问题描述：

我想尝试这样的单选按钮。

I am trying to get radio button like this..

但我变得像这样

如果未选择任何选项，我需要自定义单选按钮，它应该在里面显示白色。如果选择单选按钮，它应在框中显示绿色。如何实现这一目标？

If No option is selected, I need to customize the radio button and it should show white color inside it. If radio button is selected, it should show green color inside the box. How to achieve this?

在这里我尝试了。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
    display: inline;
}
.radio-1 {
    width: 193px;
}
.button-holder {
    float: left;
    margin-left: 6px;
    margin-top: 16px;
}
.regular-radio {
    display: none;
}
.regular-radio + label {
    background-color: #fafafa;
    border: 2px solid #cacece;
    border-radius: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
    display: inline-block;
    padding: 11px;
    position: relative;

}
.regular-radio:checked + label:after {
    background: none repeat scroll 0 0 #94E325;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    content: " ";
    font-size: 36px;
    height: 8px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 8px;
}
.regular-radio:checked + label {
    background-color: #e9ecee;
    border: 2px solid #adb8c0;
    color: #99a1a7;
    padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
</style>
  </head>
  <body>
 <div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
    </body>
</html>

答

只需添加：before 伪元素在选中收音机按钮之前处理颜色。您可以将此添加到您的 CSS ：

Just add the :before pseudo element to take care of the color before the radio button is checked. You could add this to your CSS:

 .regular-radio + label:before {
  background: none repeat scroll 0 0 #FDFDFD;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
  content: " ";
  font-size: 36px;
  height: 8px;
  left: 7px;
  position: absolute;
  top: 7px;
  width: 8px;
}

工作演示。您可以改变此标签的背景，以与您显示的示例完全匹配。希望它有帮助。

Working demo. You can ofcourse change the background of this label to match exactly the example you show. Hope it helps.

如何自定义html中的单选按钮

相关推荐