placeholder에 CSS적용시는 방법

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

/* All */
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%; 가 적용된다.
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; } 이렇게 해주면 된다.

참고자료

참고 사이트 :: https://css-tricks.com/almanac/selectors/p/placeholder/
참고 사이트2 :: https://davidwalsh.name/html5-placeholder-css

댓글 +0

댓글 남기기

이메일 주소는 공개되지 않습니다.
사용 가능한 HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>