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

我想要像这样得到单选按钮..

但我会这样

如果选择No选项,我需要自定义单选按钮,它应该在其中显示白色.如果选中单选按钮,则框内应显示绿色.怎么做到这一点？

这是我尝试过的.

的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.05),0 -15px 10px -12px rgba(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.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 1px 3px rgba(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：

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

Working demo.您可以更改此标签的背景以完全匹配您显示的示例.希望能帮助到你.

原文链接：https://www.f2er.com/html/231764.html

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

解决方法

猜你在找的HTML相关文章