CSS - 선택한 라디오 버튼 레이블을 스타일화하는 방법?

CSS - 선택한 라디오 버튼 레이블을 스타일화하는 방법?

라디오 단추의 선택한 레이블에 스타일을 추가합니다.

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

내가 뭘 잘못하고 있는지 알아요?

.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속성을 연결할 수 있습니다.

레이블 내부에 확인란을 넣으려면 스팬 태그를 추가합니다.

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

그러면 선택한 라디오 단추의 모든 형제자매에 대한 배경이 설정됩니다.

인접한 형제 선택기()를 사용하고 있습니다).+요소가 형제 요소가 아닌 경우.레이블은 입력의 상위이지 형제가 아닙니다.

CSS는 요소의 하위 요소(또는 그에 따르는 요소)를 선택할 방법이 없습니다.

이 문제를 해결하려면 JavaScript를 확인해야 합니다.

또는 마크업을 재정렬합니다.

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

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

여기 제 코드의 예가 있습니다...

HTML(JSX):

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>  
<label for="radiostyle1"><span></span> am  </label>

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm  </label>

CSS는 표준 라디오 버튼을 화면에서 사라지게 하고 사용자 정의 버튼 이미지를 중첩합니다.

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

그냥 사용하기label:focus-within {}선택한 라디오 또는 확인란으로 레이블 스타일을 지정합니다.

액세스 가능한 솔루션은 다음과 같습니다.

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

<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 솔루션이 없기 때문에, 저는 여기서 간단한 jQuery 솔루션을 사용하여 내부에 체크된 입력이 있는 레이블에 클래스를 추가합니다.

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

미리 확인한 입력의 레이블에 클래스를 지정하는 것을 잊지 마십시오.checkedlabel너무

팀 스티펜호퍼가 그들의 대답에서 언급했듯이, 가장 쉬운 방법은 입력 필드를 레이블의 자식으로 두고 사용하는 것입니다.:focus-within유사 클래스입니다.

라디오 단추를 숨기고 입력을 숨김으로 설정하거나 표시하지 않으려면 더 이상 작동하지 않습니다.해결 방법은 입력 필드에 z-index를 -1(또는 상위 레이블보다 낮은 z-index)로 지정하는 것입니다.

언급URL : https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label