728x90
반응형
대부분의 브라우저에서 placeholder 텍스트의 기본 색상은 밝은 회색이므로, 다른 색상으로 변경하고 싶다면 아래와 같이 할 수 있습니다.
input::placeholder { color: red; }
input::-webkit-input-placeholder { color: red; } /* Webkit, Chrome */
input::-moz-placeholder { color: red; opacity: 1; } /* Firefox 4~8 */
input:-moz-placeholder { color: red; opacity: 1; } /* Firefox 19+ */
input:-ms-input-placeholder { color: red; } /* IE 10+ */
Firefox의 경우는 placeholder의 텍스트가 기본적으로 약간 투명하므로, 투명도를 없애고 싶다면 opacity 값을 위와 같이 설정해줄 수 있습니다.
색상 변경 외에도 font-size , font-weight 등의 속성을 적용하여 텍스트 스타일을 변경할 수도 있습니다.
단, 이 속성은 IE에서는 10 이상의 브라우저에서만 지원됩니다.
IE9 이하 브라우저에서 placeholder 적용 방법
http://jamesallardice.github.io/Placeholders.js/에서 스크립트를 다운로드한 후, <head> 태그 안에 다운로드한 스크립트를 불러오면 됩니다.
<script type="text/javascript" src="스크립트 경로"></script>
728x90
