问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我正在尝试获得这样的单选按钮..

在此处输入图像描述

但我越来越像这样

在此处输入图像描述

如果没有选择选项，我需要自定义单选按钮，它应该在里面显示白色。如果单选按钮被选中，它应该在框内显示绿色。如何做到这一点？

这是我尝试过的。

索引.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>

原文由 UI_Dev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译csshtmlradio-button
阅读 478
2 个回答
得票最新
社区维基
1
✓ 已被采纳

只需在选中 radio 按钮之前添加 :before 伪元素来处理颜色。您可以将此添加到您的 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;
}

工作演示。您当然可以更改此标签的 background 以完全匹配您显示的示例。希望能帮助到你。

原文由 Vivek Pradhan 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

您可以通过两种方式实现所需的布局

  • 通过使用 CSS appearance 删除标准外观并应用自定义外观。不幸的是，这在 IE 中不起作用。演示：
   input[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 25px;
    height: 25px;
    padding: 6px;
    /* background-color only for content */
    background-clip: content-box;
    border: 2px solid #bbb;
    background-color: #e7e6e7;
    border-radius: 50%;
  }

  /* appearance for checked radiobutton */
  input[type="radio"]:checked {
    background-color: #93e026;
  }

  /* optional styles, I'm using this for centering radiobuttons */
  .flex {
    display: flex;
    align-items: center;
  }

   <div class="flex">
    <input type="radio" name="radio" id="radio1" />
    <label for="radio1">RadioButton1</label>
  </div>
  <div class="flex">
    <input type="radio" name="radio" id="radio2" />
    <label for="radio2">RadioButton2</label>
  </div>
  <div class="flex">
    <input type="radio" name="radio" id="radio3" />
    <label for="radio3">RadioButton3</label>
  </div>
  • 通过隐藏单选按钮并将自定义单选按钮外观设置为 label 的伪选择器。顺便说一句，这里不需要绝对定位。演示：
   *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  input[type="radio"] {
    display: none;
  }

  input[type="radio"] + label:before {
    content: "";
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 25px;
    height: 25px;
    padding: 6px;
    margin-right: 3px;
    /* background-color only for content */
    background-clip: content-box;
    border: 2px solid #bbb;
    background-color: #e7e6e7;
    border-radius: 50%;
  }

  /* appearance for checked radiobutton */
  input[type="radio"]:checked + label:before {
    background-color: #93e026;
  }

  /* optional styles, I'm using this for centering radiobuttons */
  label {
    display: flex;
    align-items: center;
  }

   <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>

原文由 Vadim Ovchinnikov 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题