CSS만 사용하여 텍스트 포함 여부에 따라 입력 필드의 스타일을 어떻게 지정할 수 있습니까?

JavaScript 없이 입력 필드에서 텍스트 식별

CSS 스타일 영역에서 입력 요소 내의 텍스트 존재를 감지하는 것은 난처한 작업. 그러나 파악하기 어려운 :empty 의사 클래스 및 [value=""] 선택기는 원하는 결과를 얻지 못합니다.

그럼에도 불구하고 :placeholder-shown 의사 클래스가 잠재적인 솔루션으로 떠오릅니다. 이 의사 클래스는 자리 표시자 텍스트를 표시하지 않고 자리 표시자 속성이 있는 입력 요소를 대상으로 합니다.

사용 방법 :placeholder-shown

1. 입력이 다음과 같은지 확인하세요. 요소에 비어 있지 않은 자리 표시자 속성이 있습니다. 단일 공백도 허용됩니다.
2. 텍스트가 포함된 입력의 스타일을 지정하려면 :not(:placeholder-shown) 선택기를 사용하세요.
3. 입력의 스타일을 지정하려면 :placeholder-shown 선택기를 사용하세요. 비어 있을 때.

예:

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

이 코드는 색상을 지정합니다. 텍스트가 포함된 경우 입력 녹색, 비어 있는 경우 빨간색.

주의 사항

이 기술은 자리 표시자 속성 사용에 의존합니다. 따라서 자리 표시자 텍스트가 바람직하지 않은 시나리오에는 적합하지 않을 수 있습니다.

위 내용은 CSS만 사용하여 텍스트 포함 여부에 따라 입력 필드의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!