placeholder에 CSS적용시는 방법

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

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

이렇게 하면 사이트 내 모든 input의 placeholder에 font-size: 90%; 가 적용된다.

지원하는 style

  • font properties
  • color
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • 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

댓글 남기기

이메일 주소는 공개되지 않습니다.
다음 태그 및 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>