[forms] 선택된 단일 선택 단추 레이블에 대한 CSS 선택기

Program / 글쓴이

선택한 라디오 버튼의 레이블에 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>

… 라디오 입력을 따르는 한 div 등이 있거나없는 모든 구조에서 작동합니다.

예:

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에 대한 샘플을 확인하십시오.

* {
  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]:checkedDOM 요소에서 header컨테이너 로 이동 한 다음 자손 / 자식 선택기를 사용하여 labels 자체 에 액세스 할 수 있으므로 추가 할 때 스타일 을 지정할 수 있다는 이점이 있습니다. 해당 라디오 상자 / 확인란이 선택 됩니다.

레이블의 스타일을 지정할 수있을뿐만 아니라 모든 inputs 에 대해 형제 컨테이너의 자손 일 수있는 다른 컨텐츠의 스타일도 지정할 수 있습니다 . 그리고 지금 당신이 기다리고있는 순간, JSFIDDLE ! 그곳에 가서 함께 놀아보세요. 효과가있는 이유를 찾아 내십시오.

다행스럽게도 모든 것이 말이되고 질문에 완전히 대답하고 가능한 모든 후속 조치가 이루어지기를 바랍니다.

답변

입력 값이의 하위 요소이고 label둘 이상의 레이블이있는 경우 @Mike의 트릭 을 Flexbox+ 와 결합 할 수 있습니다 order.

여기에 이미지 설명을 입력하십시오

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속성을 모두 제공하기 때문에 나에게만 효과적이었습니다 .

신경 쓰지 말고 Brilliand에게 큰 관심을 가져주십시오!

레이블이 체크 박스의 형제 인 경우 (보통 경우) ~형제 선택기를 사용하여 label[for=your_checkbox_id]주소를 지정할 수 있습니다 … 여러 레이블이있는 경우 레이블에 ID를 부여하십시오 (이 예 에서 버튼에 라벨 사용)

여기에 같은 것을 찾고 있지만 문서 에서 내 대답을 찾게되었습니다 .

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

label[checked] {
  ...
}

나는 그것이 오래된 질문이라는 것을 알고 있지만 어쩌면 그것은 누군가를 도울 수 있습니다 🙂

답변