[HTML, CSS] input, textarea의 placeholder에 스타일 작업하는 방법(색상 등)

jaewooojung 2019. 8. 23. 21:34

::placeholder

가상 요소 ::placeholder를 사용하여 input과 textarea 태그의 placeholder에 스타일을 적용할 수 있습니다(간단 주의).

방법은 모두 동일하니 input 태그를 예시로 살펴보겠습니다.

input 태그가 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .email-input {
      }
    </style>
  </head>
  <body>
    <input class="email-input" type="email" name="email" placeholder="이메일을 입력하세요" />
  </body>
</html>

email-input 클래스의 ::placeholder 요소를 설정합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .email-input {
      }
      .email-input::placeholder {
        color: peru;
        font-weight: 600;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <input class="email-input" type="email" name="email" placeholder="이메일을 입력하세요" />
  </body>
</html>

감사합니다.

저작자표시 (새창열림)