CSS를 사용하여 빈 입력 필드의 스타일을 안정적으로 지정하려면 어떻게 해야 합니까?

CSS를 사용하여 빈 입력 필드 스타일 지정

일반적인 스타일링 요구 사항 중 하나는 빈 입력 필드에 특정 규칙을 적용하는 것입니다. 이는 자리 표시자 텍스트나 색상 테두리와 같은 시각적 단서를 사용자에게 제공하는 데 유용할 수 있습니다. 그러나 빈 입력을 대상으로 하는 input[value=""] 선택기를 사용하면 의도한 대로 작동하지 않을 수 있습니다.

최신 브라우저에서 :placeholder-shown 의사 클래스는 빈 입력 필드의 스타일을 지정하는 보다 안정적인 방법을 제공합니다. . 이 의사 클래스는 입력 필드가 비어 있음을 나타내는 자리 표시자 텍스트가 현재 표시되는 입력 필드를 대상으로 합니다.

빈 입력 필드에 빨간색 테두리를 적용하려면 다음 CSS를 사용할 수 있습니다.

input:placeholder-shown {
  border: 1px solid red;
}

또한 HTML의 입력 필드에 자리 표시자 속성을 설정해야 합니다.

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

Chrome에는 최소한 공백 문자가 필요합니다. :placeholder-shown 의사 클래스를 트리거하는 자리 표시자 값입니다. 이렇게 하면 사용자 입력을 허용하면서도 입력 필드가 기술적으로 비어 있지 않게 됩니다.

:placeholder-shown을 사용하면 빈 입력 필드를 대상으로 하고 향상된 사용자 피드백을 제공하는 사용자 정의 스타일을 생성할 수 있습니다.

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