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

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

체크된 라디오 버튼의 라벨에 css(3) 스타일을 적용할 수 있습니까?

다음과 같은 마크업이 있습니다.

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

제가 바라던 것은

label:checked { font-weight: bold; }

뭔가를 할 수 있지만 (내가 예상했던 대로) 그렇지 않습니다.

이러한 기능을 달성할 수 있는 셀렉터가 있습니까?도움이 된다면 div 등으로 둘러쌀 수 있지만, 가장 좋은 해결책은 "for" 속성이라는 레이블을 사용하는 것입니다.

제 애플리케이션에 브라우저를 지정할 수 있으니 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>

그리고 라벨이 라디오 입력을 따르는 한, 디브 등이 있든 없든 어떤 구조에도 작동할 것입니다.

예:

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

그러면 그냥 텍스트를 다음으로 감싼다.<span>:

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

JSFiddle에서 확인하십시오.

처음에 어디서 언급했는지 잊었지만, 당신이 가지고 있는 한 당신은 실제로 다른 용기에 당신의 라벨을 넣을 수 있습니다.for= SO에 대한 확인해 SO에 대한 샘플을 확인해 보겠습니다.

* {
  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>

Whuw. "샘플"치고는 많은 양이었지만, 저는 그것이 효과와 요점을 확실히 전달한다고 생각합니다. 우리는 형제가 아니더라도 확인된 입력 컨트롤에 대한 레이블을 선택할 수 있습니다.비밀은 태그를 필요한 항목(이 경우 요소만)에만 하위 항목으로 유지하는 데 있습니다.

label요는실활않습니다지용하제를 .:checked이 사유선택, 라이다저는것은않중습다니지하요되에 되어 있는 것은 .header그것은 추가적인 이점을 가지고 있습니다.header형제 요소를 사용할 수 있습니다.~에서 할 일반 input[type=radio]:checked를 DOM으로 합니다.header를 선택한 하여 컨테하너하다음위위선/를사액다니세합스용택여에 .label자체적으로 각 라디오 박스/카운터를 선택할 때 스타일을 지정할 수 있습니다.

레이블에 스타일을 지정할 수 있을 뿐만 아니라 모든 컨텐츠와 비교하여 형제 컨테이너의 후손일 수 있는 다른 컨텐츠에도 스타일을 지정할 수 있습니다.input이제 여러분 모두가 기다려온 그 순간을 위해, JSFIDLE! 가서, 그것을 가지고 놀고, 그것이 여러분을 위해 작동하도록 만들고, 그것이 왜 작동하는지를 발견하고, 그것을 부수고, 여러분이 하는 일을 하세요!

모든 것이 이치에 맞고 질문과 발생할 수 있는 후속 조치에 완전히 답하기를 바랍니다.

입력이 의 하위 요소인 경우label그리고 당신은 두 개 이상의 레이블을 가지고 있으며, 당신은 @Mike의 트릭을 결합할 수 있습니다.Flexbox+order.

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 }



/* style the switch */

:root {
  --radio-size: 14px;
}

.switchLabel input.switch  {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  border: 1px solid #999999;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: inherit;
  -moz-appearance: inherit;
  appearance: inherit;
  
  box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 calc(5px + var(--radio-size) / 2) 0 5px;
}

.switchLabel input.switch:checked {
  box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 5px 0 calc(5px + var(--radio-size) / 2);
}

<label class="switchLabel">
  <input type="checkbox" class="switch" />
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

asd

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 해킹을 사용하여 최상위 수준에서 숨겨진 입력을 만들 수 있습니다.

업데이트:

이것은 우리의 기존 생성된 HTML이 엉뚱하고 생성되었기 때문에 나에게만 효과가 있었습니다.label와 함께radio둘 다 주는 모래checked기여하다.

신경 쓰지 마세요, 그리고 브릴랜드가 그것을 제기한 것에 대해 크게 기뻐합니다!

레이블이 확인란의 형제인 경우(일반적으로 해당됨),~형제 선택기 및label[for=your_checkbox_id]그것을 해결하기 위해서는또는 레이블이 여러 개인 경우 레이블에 ID를 지정합니다(예: 단추에 레이블을 사용하는 경우).

---

같은 것을 찾으러 왔지만 서류에서 제 답을 찾았습니다.

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

label[checked] {
  ...
}

오래된 질문인 건 알지만, 아마도 누군가에게 도움이 될 거예요 :)

언급URL : https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label