placeholder에 CSS적용시는 방법

CSS

placehoder에 아주 간단하게 CSS를 적용시킬 수 있다.

input::-webkit-input-placeholder { font-size: 90%; }
input::-moz-placeholder { font-size: 90%; }
input:-ms-input-placeholder { font-size: 90%; }
input:-moz-placeholder { font-size: 90%; }
input::placeholder { font-size: 90%; }

이렇게 하면 사이트 내 모든 input의 placeholder에 font-size: 90%; 가 적용된다.
style은 각각 따로 지정해줘야 적용되니 주의하자.
(콤마로 한번에 style을 입히면 작동하지 않는걸 확인했다. 왜지..)

지원하는 style

  • font properties
  • color
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • text-transform
  • text-align
  • vertical-align
  • line-height
  • text-indent
  • opacity

※ Firefox에서 placeholder의 미묘한 투명도가 거슬린다면 ::-moz-placeholder { opacity: 1; } 이렇게 해주면 된다.

※ IE11에서 placeholder의 속성이 제대로 적용되지 않는다면 !important를 사용해보자.

참고자료

블로그
프로젝트
스터디