单选按钮的边框

Question

我有这样的代码，我无法手动修改（仅限css）

<label class="radio">
   <input type="radio" name="showTabs" checked="" value="1"> LABEL 1
</label>

<label class="radio">
   <input type="radio" name="showTabs" value="2"> LABEL 2
</label>

如何为已检查的radiobutton +标签添加边框？

Answer 1

检查以下代码，希望这是您所期望的

＆＃13;

＆＃13;

.radio{
   position:relative;
   display:inline-block;
}

.ch-style{
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: 0;
}


input[type="radio"]:checked ~ .ch-style{ 
   border:1px solid red;
}

＆＃13;

<label class="radio">
<input type="radio" name="showTabs" value="2"> LABEL 2
<span class="ch-style"><span>
</label>

＆＃13;

＆＃13;

＆＃13;