Question

即使在选择其他两个之后，它也默认为第一个我的代码： -

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


    input[type=radio] + label:before {
            content: "";  
            display: inline-block;  
            width: 35px;  
            height: 35px;  
            vertical-align:middle;
            margin-right: 8px;  
            background-color: #DFF0EF;  
            box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
            border-radius: 4px;  
        }

    input[type=radio]:checked + label:before {
            content:"\2714";
            color:white;
            background-color: #34E098; 
            font-size:1.5em;
            text-align:center;
            line-height:34px;
            text-shadow:0px 0px 3px #eee;

        }

我的按钮： - https://codepen.io/coderguyinthehouse/pen/VjbdLd

Answer 1

您的ID必须是唯一的，因此相关标签必须是＆＃39; for值。

EG

<input type="radio" id="sizeselected1" name="downloadsize" value="KB">
<label for="sizeselected1">1</label>

＆＃13;

input[type=radio] {
            display:none;
}

input[type=radio] + label:before {
        content: "";  
        display: inline-block;  
        width: 35px;  
        height: 35px;  
        vertical-align:middle;
        margin-right: 8px;  
        background-color: #DFF0EF;  
        box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
        border-radius: 4px;  
    }

input[type=radio]:checked + label:before {
        content:"\2714";
        color:white;
        background-color: #34E098; 
        font-size:1.5em;
        text-align:center;
        line-height:34px;
        text-shadow:0px 0px 3px #eee;
       
    }

＆＃13;

<form class="sizeselect" id="sizeselect" name="sizeselect">
  <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
  <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
  <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>

<form class="speedselect" id="speedselect" name="speedselect">
  <input type="radio" id="speedselected1" name="downloadspeed" value="Kbps"><label for="speedselected1">11</label>
  <input type="radio" id="speedselected2" name="downloadspeed" value="Mbps"> <label for="speedselected2">12</label>
  <input type="radio" id="speedselected3" name="downloadspeed" value="Gbps"> <label for="speedselected3">13</label>
</form>

＆＃13;

Answer 2

您不能使用相同的ID

<form class="sizeselect" id="sizeselect" name="sizeselect">
<input type="radio" id="sizeselected1" name="downloadsize" value="KB"
<label for="sizeselected1">1</label>
 <input type="radio" id="sizeselected2" name="downloadsize" value="MB"
<label for="sizeselected2">2</label>
<input type="radio" id="sizeselected3" name="downloadsize" value="GB"
<label for="sizeselected3">3</label>
</form>

同样适用于其他形式...更改ID。

Answer 3

您需要在输入中使用唯一ID

<form class="sizeselect" name="sizeselect">
  <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
  <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
  <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>

<form class="speedselect" name="speedselect">
  <input type="radio" id="speedselected11" name="downloadspeed" value="Kbps"><label for="speedselected11">11</label>
  <input type="radio" id="speedselected12" name="downloadspeed" value="Mbps"> <label for="speedselected12">12</label>
  <input type="radio" id="speedselected13" name="downloadspeed" value="Gbps"> <label for="speedselected13">13</label>
</form>

Answer 4

由于您使用的是自定义复选框，因此单击标签时会触发选中状态 - 但所有标签都是针对相同的输入（sizeselected）。只需更改每个输入的ID，它就会按预期工作！

    <form class="sizeselect" id="sizeselect" name="sizeselect">
      <input type="radio" id="sizeselected" name="downloadsize" value="KB">
      <label for="sizeselected">1</label>
      <input type="radio" id="sizeselected2" name="downloadsize" value="MB">        
      <label for="sizeselected2">2</label>
      <input type="radio" id="sizeselected3" name="downloadsize" value="GB">
      <label for="sizeselected3">3</label>
    </form>

https://codepen.io/will0220/pen/KrmZqr

在应用css后我无法选择单选按钮

4 个答案: