CSS :자리표시자 표시 클래스

여러분, 자리 표시자에 대해 이야기해 봅시다. 양식 요소에 대한 놀라운 추가.

오늘 우리는 그것들을 접근성 문제 및 위험으로 이야기하지 않고 그것들을 가진 입력의 스타일을 지정하는 방법에 대해서만 이야기할 것입니다.

CSS에서는 ::placeholder 의사 요소를 사용하여 실제 자리 표시자 텍스트의 스타일을 지정할 수 있습니다.

하지만 :placeholder-shown라는 의사 클래스도 있다는 것을 알고 계셨습니까? 이것은 실제 입력 필드와 스타일을 선택하므로 갑자기 테두리와 물건을 추가할 수 있습니다!

최종 결과는 자리 표시자가 표시된다는 사실에 따라 스타일이 지정된 입력 필드가 됩니다. 일단 입력하면 이 스타일을 제거해야 합니다.

HTML 구조

먼저 두 개의 입력 필드를 렌더링하는 기본 HTML을 생성하는 것으로 시작하겠습니다. 한 번은 자리 표시자가 있고 다른 하나는 값이 있습니다.

<div class="container">
   <input type="text" value="I have a value" />
  <input type="text" placeholder="I have a placeholder" />
</div>

CSS :자리표시자 표시 클래스

자, 먼저 페이지에 몇 가지 기본 스타일을 추가해 보겠습니다.

body {
  min-height: 100vh;
  background: #efe9e7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  background: #dae0f2;
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.container input {
  font-size: 1.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
}

이것을 실행하면 아래 이미지와 같은 기본 양식을 얻을 수 있습니다.



이제 자리 표시자가 활성인 렌더링을 다르게 만들려면 어떻게 해야 합니까?

.container input:placeholder-shown {
  border: 5px dashed teal;
}

이제 점선 청록색 테두리가 표시되고 값을 입력하면 해당 테두리가 사라집니다!

::플레이스홀더 대 :플레이스홀더에 표시된 차이점

요약하자면::placeholder 의사 요소를 사용하여 실제 자리 표시자 텍스트 스타일을 변경할 수 있습니다.

input::placeholder {
    color: teal;
}

그리고 :placeholder-shown 의사 클래스를 사용하여 실제 입력 스타일을 지정할 수 있습니다.

input:placeholder-shown {
    border: 5px dashed teal;
}

이 Codepen에서 플레이할 전체 데모를 찾을 수 있습니다.

브라우저 지원

기본 브라우저는 물론 이를 완벽하게 지원합니다. 물론 IE는 골칫거리여야 합니다. 이것을 좋은 추가 기능으로 사용하는 것이 좋지만 완전히 의존하지는 마세요.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나