placeholder에 CSS적용시는 방법

2017-02-21

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를 사용해보자.

참고자료

참고 사이트 :: https://css-tricks.com/almanac/selectors/p/placeholder/
참고 사이트2 :: https://davidwalsh.name/html5-placeholder-css
참고 사이트3 :: https://stackoverflow.com/questions/22199047/placeholder-css-not-being-applied-in-ie-11