CSS 선택기가 입력 값을 타겟팅할 수 있나요?

CSS 선택기로 입력 값 타겟팅

질의: CSS 선택기를 사용하여 특정 값을 기반으로 입력을 타겟팅할 수 있나요? 예를 들어, 값이 "United States"인 입력을 어떻게 격리할 수 있습니까?

답변:

기존 CSS 접근 방식:

네, 가능합니다. CSS 속성 선택기는 해당 값을 기반으로 입력 타겟팅을 활성화합니다. 다음 규칙은 값이 "United States"인 입력을 대상으로 합니다.

<code class="css">input[value="United States"] { color: #F90; }</code>

동적 값이 있는 문제:

위 접근 방식은 HTML 노드의 속성 값을 대상으로 합니다. 그러나 값이 동적으로 변경되면 CSS 규칙이 적용되지 않습니다.

JavaScript 개입:

입력 값을 동적으로 타겟팅하려면 JavaScript를 해결 방법으로 활용할 수 있습니다. . 이 jsFiddle에는 한 가지 방법이 나와 있습니다.

<code class="html"><input type="text" id="country" value="United States"></code>

<code class="javascript">var countryInput = document.getElementById('country');
if (countryInput.value === 'United States') {
  countryInput.style.color = '#F90';
}</code>

이 스크립트는 입력 값을 확인하고 원하는 값과 일치하면 스타일을 적용합니다.

결론 :

CSS 선택기는 입력 값을 대상으로 하는 편리한 방법을 제공합니다. 정적 값의 경우 속성 선택기로 충분합니다. 그러나 동적 값의 경우 CSS 규칙이 올바르게 적용되도록 하려면 JavaScript 솔루션이 필요합니다.

위 내용은 CSS 선택기가 입력 값을 타겟팅할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!