CSS - 선택한 라디오 단추 레이블의 스타일을 지정하는 방법

Question

나는 라디오 버튼의 선택 라벨에 스타일을 추가 할

:

HTML :

<div class="radio-toolbar"> 
<label><input type="radio" value="all" checked>All</label> 
<label><input type="radio" value="false">Open</label> 
<label><input type="radio" value="true">Archived</label> 
</div> 

CSS 내가 잘못 뭘하는지

.radio-toolbar input[type="radio"] {display:none;} 
.radio-toolbar label { 
    background:Red; 
    border:1px solid green; 
    padding:2px 10px; 
} 
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important; 
} 

어떤 아이디어?

Answer 1

.radio-toolbar input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.radio-toolbar label { 
 
    display: inline-block; 
 
    background-color: #ddd; 
 
    padding: 4px 11px; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
} 
 

 
.radio-toolbar input[type="radio"]:checked+label { 
 
    background-color: #bbb; 
 
}

<div class="radio-toolbar"> 
 
    <input type="radio" id="radio1" name="radios" value="all" checked> 
 
    <label for="radio1">All</label> 
 

 
    <input type="radio" id="radio2" name="radios" value="false"> 
 
    <label for="radio2">Open</label> 
 

 
    <input type="radio" id="radio3" name="radios" value="true"> 
 
    <label for="radio3">Archived</label> 
 
</div>

첫째, 당신은 아마 라디오 버튼에 name 속성을 추가 할 수 있습니다. 그렇지 않으면 동일한 그룹의 일부가 아니며 여러 라디오 버튼을 확인할 수 있습니다.

또한 라디오 버튼 중 형제로 레이블을 배치했기 때문에 id 및 for 속성을 사용하여 레이블을 연결해야했습니다.

Answer 2

요소가 형제가 아닌 경우 인접 형제 선택기 (+)를 사용하고 있습니다. 이 라벨은 입력의 부모이며 형제가 아닙니다.

CSS는 자손을 기반으로 요소를 선택할 수 없으며 그 뒤에 오는 요소도 선택할 수 없습니다.

이 문제를 해결하려면 자바 스크립트를 살펴야합니다.

또는 마크 업을 재 배열 : 모든

<input id="foo"><label for="foo">…</label> 

이

Answer 3

라벨 안에 체크 박스를 넣으려면 여분의 span 태그를 추가하십시오 (예 :

HTML

<div class="radio-toolbar"> 
<label><input type="radio" value="all" checked><span>All</span></label> 
<label><input type="radio" value="false"><span>Open</span></label> 
<label><input type="radio" value="true"><span>Archived</span></label> 
</div> 

선택한 라디오 버튼의 모든 형제 자매에 대한 배경을 설정합니다 CSS

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important; 
} 

.

Answer 4

html과 css에 스팬을 추가 할 수 있습니다. 여기

는

HTML (JSX) ... 내 코드에서 예입니다 :

input[type="radio"] { 
    opacity:0;          
} 

input[type="radio"] + label { 
    font-size:1em; 
    text-transform: uppercase; 
    color: white ; 
    cursor: pointer; 
    margin:auto 15px auto auto;      
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:30px; 
    height:10px; 
    margin:1px 0px 0 -30px;      
    cursor:pointer; 
    border-radius: 20%; 
} 


input[type="radio"] + label span { 
    background-color: #FFFFFF 
} 


input[type="radio"]:checked + label span{ 
    background-color: #660006; 
}