확인 된 라디오 버튼의 레이블에 대한 CSS 선택기

StackOverflow https://stackoverflow.com/questions/1431726

  •  07-07-2019
  •  | 
  •  

문제

CSS (3) 스타일을 확인 된 라디오 버튼의 레이블에 적용 할 수 있습니까?

다음 마크 업이 있습니다.

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

내가 바라는 것은 그게 그게 다 

label:checked { font-weight: bold; }

무언가를 할 것이지만 아아 아아 (내가 예상 한대로).

이러한 종류의 기능을 달성 할 수있는 선택기가 있습니까? 도움이되면 DIV 등으로 둘러싸여있을 수 있지만 최상의 솔루션은 레이블 '' '속성에 레이블을 사용하는 솔루션입니다.

내 응용 프로그램에 대한 브라우저를 지정할 수 있으므로 클래스 CSS3 등을 제 평가하십시오.

도움이 되었습니까?

해결책 

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked

다음 마크 업을 위해 매우 잘 작동합니다.

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

... 라벨이 무선 입력을 따르는 한 divs 등이 있거나없는 모든 구조에 대해 작동합니다.

예시:

input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

다른 팁

나는 이것이 오래된 질문이라는 것을 알고 있지만, 당신이 가고 싶다면 <input> 아이가 되십시오 <label> 그것들을 분리하는 대신, 당신이 그것을 달성 할 수있는 순수한 CSS 방법이 있습니다.

:checked + span { font-weight: bold; }

그런 다음 텍스트를 a로 랩핑하십시오 <span>:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

참조하십시오 jsfiddle.

처음 언급 한 곳을 잊어 버렸지 만 실제로 당신은 당신이 가지고있는 한 다른 곳에 컨테이너에 라벨을 내릴 수 있습니다. for= 속성 세트. 자, 샘플을 확인해 봅시다.

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

아휴. 그것은 "샘플"에게는 많은 것이었지만 실제로 효과와 요점을 집으로 몰아 넣는 것 같습니다. 우리는 형제가 아닌 확인 입력 컨트롤에 대한 레이블을 확실히 선택할 수 있습니다. 비밀이 있습니다 유지 input 아이를 자녀에게 필요한 것만 태그를 지정합니다 (이 경우에만 body 요소).

이후 label 요소는 실제로 사용하지 않습니다 :checked 의사 선택기, 라벨이 header. 그것은 그 이후로 그 이점이 추가됩니다 header 우리가 사용할 수있는 형제 요소입니다 ~ 일반 형제 자매 선택기에서 이동할 수 있습니다 input[type=radio]:checked 돔 요소 header 컨테이너를 사용한 다음 자손/자식 선택기를 사용하여 액세스하십시오. label스스로, 각각의 라디오 상자/확인란을 선택할 때 스타일링 할 수있는 기능.

우리는 라벨을 스타일링 할 수있을뿐만 아니라 모든 것에 비해 형제 컨테이너의 후손이 될 수있는 기타 콘텐츠를 스타일링 할 수 있습니다. input에스. 그리고 이제 당신이 모두 기다리고있는 순간 jsfiddle! 거기에 가서 놀고, 당신을 위해 일하고, 그것이 작동하는지, 그것을 깨고, 당신이하는 일을하십시오!

다행스럽게도 모든 것이 의미가 있고 질문에 완전히 대답하고 자란 후속 조치에 전적으로 답변하기를 바랍니다.

입력이 자식 요소 인 경우 label 그리고 당신은 둘 이상의 레이블이 있고 결합 할 수 있습니다. @Mike의 속임수 ~와 함께 Flexbox + order.

enter image description here

HTML
<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>
CSS
label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

참조하십시오 jsfiddle.

참고 : 형제 선택기는 동일한 부모 내에서만 작동합니다. 이 문제를 해결하려면 입력을 최상위 수준으로 숨길 수 있습니다. @Nathan Blair 마구 자르기.

약간의 jQuery를 사용할 수 있습니다.

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

확인 된 라디오 버튼에 페이지로드의 올바른 클래스가 있는지 확인해야합니다.

업데이트:

이것은 기존의 생성 된 HTML이 엉망이되어 생성 되었기 때문에 저에게만 효과가있었습니다. labelS와 함께 radios와 그들 모두를주는 것 checked 기인하다.

신경 쓰지 마십시오.

레이블이 확인란의 형제 인 경우 (일반적으로 경우) ~ 형제 자매 및 a label[for=your_checkbox_id] 이를 해결하려면 ... 또는 여러 레이블이있는 경우 라벨에 ID를 제공합니다 ( 예시 버튼에 레이블을 사용하는 곳)

똑같은 것을 찾고 여기에 왔지만 결국 내 대답을 찾았습니다. 문서.

ㅏ label 요소 checked 속성은 다음과 같이 선택할 수 있습니다.

label[checked] {
  ...
}

나는 그것이 오래된 질문이라는 것을 알고 있지만 아마도 누군가를 도울 수도 있습니다 :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top