在反应中按下单选按钮时无法设置边框样式答案

【问题标题】：can't style border when pressed on radio button in react在反应中按下单选按钮时无法设置边框样式
【发布时间】：2020-06-15 16:35:11
【问题描述】：

所以我创建了这些 div 并让它们像一个单选按钮：

[![这些 4div][1]][1]

当我按下其中一个时，我希望边框像边框一样呈蓝色：2px 纯蓝色；

但这种情况正在发生：

[![问题][2]][2]

我该怎么做才能像这样将边框颜色设为蓝色：

sudies.js 代码：

<ul>
            <li>
            <input type='radio' value= '1' name ='radio' id='radio1'/>
            <label for='radio1'><div className="rcorners2 " ></div></label>
            </li>
            <li>
        <input type='radio' value='2' name='radio'  id='radio2'/>
        <label for='radio2'><div className="rcorners2 " ></div></label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'><div className="rcorners2 " ></div></label>
    </li>

        </ul>

sudies.css：

ul {
    list-style:none;
}
li{
    display:inline-block;
    margin-right: 15px;
}
input{
    visibility:hidden;
}
label{
    cursor:pointer;
}
input:checked + label {
    border: 2px solid blue;
}

【问题讨论】：

标签： css reactjs radio-button

【解决方案1】：

不需要额外的div，您可以设置标签以获得所需的输出。

ul {
  list-style: none;
}

li {
  display: inline-block;
}

input {
  visibility: hidden;
}

label {
  cursor: pointer;
  background: #ccc;
  padding: 2px 20px;
  border-radius: 4px;
  border: 2px solid transparent;
}

input:checked+label {
  border-color: blue;
}

<ul>
  <li>
    <input type='radio' value='1' name='radio' id='radio1' />
    <label for='radio1'>Radio 1</label>
  </li>
  <li>
    <input type='radio' value='2' name='radio' id='radio2' />
    <label for='radio2'>Radio 2</label>
  </li>
  <li>
    <input type='radio' value='3' name='radio' id='radio3' />
    <label for='radio3'>Radio 3</label>
  </li>

</ul>

【讨论】：