не может стилизовать границу при нажатии на радиокнопку в реакции - PullRequest
Новая
       12

не может стилизовать границу при нажатии на радиокнопку в реакции

0 голосов
/ 27 мая 2020

поэтому я создал эти div и заставил их действовать как переключатель:

[! [Эти 4divs] [1]] [1]

, когда я нажимаю на один из них я хочу, чтобы граница была окрашена в синий цвет, как border: 2px solid blue;

, но вместо этого происходит следующее:

[! [проблема] [2]] [2]

что я могу сделать, чтобы цвет границы был синим, как это:

sudies. js code: 

<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;
}

1 Ответ

0 голосов
/ 27 мая 2020

Нет необходимости в дополнительных 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>
...