CSS를 사용하여 빈 입력 필드의 스타일을 어떻게 지정합니까?

CSS의 빈 입력 필드 스타일 지정

빈 상태를 기반으로 입력 필드를 쿼리하려면 CSS에서 특정 접근 방식이 필요합니다. 제공된 input[value=""] 선택기는 최신 브라우저에서 작동하지 않지만 사용 가능한 해결 방법이 있습니다.

:placeholder-shown을 입력하세요. 이 의사 클래스는 특히 빈 입력 필드를 대상으로 하므로 입력 필드에 값이 포함되면 제거되는 스타일을 적용할 수 있습니다. 예:

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

:placeholder-shown 선택기가 작동하려면 HTML에서 placeholder 속성을 설정해야 한다는 점에 유의하는 것이 중요합니다. 또한 Chrome에서는 자리 표시자 값으로 최소한 공백 문자가 하나 이상 있어야 합니다.

다음과 같이 공백이 있는 자리 표시자 속성을 포함해야 합니다.

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

위 내용은 CSS를 사용하여 빈 입력 필드의 스타일을 어떻게 지정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!