CSS 형식 입력 (선택됨) 조건부

질문

button을 선택하면 (예 : 텍스트를 녹색으로 변경) 라디오 레이블 텍스트의 색상을 변경할 수 있지만 조건부로 변경하고 싶습니다. 즉. 옵션 1을 선택하면 텍스트를 녹색으로 변경하고 옵션 2를 선택하면 텍스트를 빨간색으로 변경합니다.

[JSF 중간] [1]

HTML

<div class="radio">
      <input type="radio" name="option"><label>Red when checked</label>
</div>
<div class="radio">
    <input type="radio" name="option"><label>Green when checked</label>
</div>

CSS

input[type=radio]:checked + label {
  color: green;
}

답변1

선택했을 때 각 항목이 고유 한 색상을 갖도록하려면 더 구체적인 선택기를 사용할 수 있습니다.

input[type=radio]:nth-child(1):checked {
  color: green;
}
input[type=radio]:nth-child(2):checked {
  color: red;
}

두 항목 모두 동일한 색상을 사용하려면 CSS만으로는 그렇게 할 수 없습니다. 아직 . 부모 container에 class를 추가하고이를 기반으로 스타일을 설정하려면 JavaScript를 사용해야합니다. 이 같은:

HTML :

<div id="container">
  <div class="radio" data-color="green">
    <input type="radio" name="option"><label>Red when checked</label>
  </div>
  <div class="radio" data-color="red">
    <input type="radio" name="option"><label>Green when checked</label>
  </div>
</div>

자바스크립트 :

const container = document.getElementById("container");
container.addEventListener("input", (event) => {
  container.className = event.target.dataset.color;
})

CSS :

.green input[type=radio] {
  color: green;
}
.red input[type=radio] {
  color: red;
}

답변2

다음과 같은 JavaScript 함수를 사용하는 것이 좋습니다.document.queryselectorAll ()

 

 

 

 

출처 : https://stackoverflow.com/questions/62687026/css-format-input-checked-conditionally