邊境的單選按鈕

Question

我有這樣的代碼，我不能handly（僅適用於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> 

我怎樣才能避免添加邊框選中單選按鈕+標籤？

Answer 1

檢查下面的代碼，希望這是你所期待

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

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