多个提示的单选按钮自定义样式

Posted 2023-03-27

【中文标题】多个提示的单选按钮自定义样式

【英文标题】：Radio Button Custom Styling For Multiple Prompts

【发布时间】：2019-11-18 11:07:08

【问题描述】：

基本上，我正在尝试创建自己的单选按钮组件以再次响应和重用，但我正在努力让按钮与样式一起正常工作。如果您在第二组中选择一个按钮，即使每个组都有不同的name 属性，它也不会正确反应。如果我摆脱自定义样式，它可以正常工作。

我觉得跟这个有关系，但是还没找到解决办法：

.radio-custom 
    opacity: 0;
    position: absolute; 

这是我的代码笔：

https://codepen.io/Sbphillips19/pen/XLyzzN

html：

  <form>
        <h2>Radio Button Prompt 1</h2>
        <div>
            <input id="radio-1" class="radio-custom" name="radio-group" type="radio">
            <label for="radio-1" class="radio-custom-label">First Choice</label>
        </div>
        <div>
            <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
            <label for="radio-2" class="radio-custom-label">Second Choice</label>
        </div>
        <div>
            <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
            <label for="radio-3" class="radio-custom-label">Third Choice</label>
        </div>
      </div>



 <h2>Radio Button Prompt 2</h2>
        <div>
            <input id="radio-1" class="radio-custom" name="radio-group-2" type="radio">
            <label for="radio-1" class="radio-custom-label">First Choice</label>
        </div>
        <div>
            <input id="radio-2" class="radio-custom"name="radio-group-2" type="radio">
            <label for="radio-2" class="radio-custom-label">Second Choice</label>
        </div>
        <div>
            <input id="radio-3" class="radio-custom" name="radio-group-2" type="radio">
            <label for="radio-3" class="radio-custom-label">Third Choice</label>
        </div>
      </div>
    </form>

和 CSS：

.radio-custom 
    opacity: 0;
    position: absolute; 


.radio-custom, .radio-custom-label 
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;


.checkbox-custom-label, .radio-custom-label 
    position: relative;


.radio-custom + .radio-custom-label:before 
    content: '';
    background: white;
    border: 2px solid #888888;
    display: inline-block;
    vertical-align: middle;
    width: 44px;
    height: 44px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
  border-radius: 50%;


.radio-custom:checked + .radio-custom-label:before 
    background: #444444;
    box-shadow: inset 0px 0px 0px 6px #fff;

【参考方案1】：

问题在于 attr id 应该是唯一的！

将html 的以下第二部分更改为此，它将起作用：

工作示例：https://codepen.io/jo-o-teixeira-the-sasster/pen/agQErM

单选按钮提示 2

<div>
        <input id="radio-4" class="radio-custom" name="radio-group-2" type="radio">
        <label for="radio-4" class="radio-custom-label">First Choice</label>
    </div>
    <div>
        <input id="radio-5" class="radio-custom"name="radio-group-2" type="radio">
        <label for="radio-5" class="radio-custom-label">Second Choice</label>
    </div>
    <div>
        <input id="radio-6" class="radio-custom" name="radio-group-2" type="radio">
        <label for="radio-6" class="radio-custom-label">Third Choice</label>
    </div>
  </div>

【讨论】：

我之前只使用id 尝试过，但没有意识到标签中的for 也需要在标签中进行更改。谢谢