[CSS] Input or textarea에 안내문구 추가 - placeholder 색상, 폰트 변경

placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input이나 textarea에 안내문을 추가합니다.

 

기본 색상은 회색으로 배경색이 어두운 색이거나 화려한 색일 경우 ::placeholder 선택자로 색상 및 폰트를 변경할 수 있습니다.

 

placeholder를 사용하여 안내문구를 추가합니다.

    <p><input placeholder="Input text"></p>
    <textarea placeholder="Input text"></textarea>

 

::placeholder 선택자(Selecter)로 글자 색과 모양을 변경합니다.

input::placeholder {
  color: red;
  font-style: italic;
}
textarea::placeholder {
  color: blue;
  font-weight: bold;
}

 

만약 적용이 되지 않는 브라우져가 있다면 아래와 같이 수정하면 됩니다.

// Chrome/Opera/Safari
::-webkit-input-placeholder {
  color: blue;
}
// Firefox 19버전 이상
::-moz-placeholder {
  color: blue;
}
// IE 10+
:-ms-input-placeholder { 
  color: blue;
}
// Firefox 18버전 이하
:-moz-placeholder {
  color: blue;
}