input (placeholder) 스타일 넣기

 

 

 

placeholder에 스타일 넣기

input type text에 placeholder라는 속성이 있는데, placeholder를 지정해주면 입력값을 적지 않았을때 value를 설정했을때 처럼 표기가 됩니다.

여기서 value와 placeholder의 차이점은 입력값을 넣을때 value는 value에 지정해넣은 텍스트를 지우고 입력값을 넣어야하지만, placeholder는 입력값을 넣을때 자동으로 지정해 놓았던 placeholder값이 사라지로 입력값이 작성된다는 점입니다.

이 placeholder에는 글씨 색상이 들어가 있는데 이를 수정해 주시려면 하단의 코드를 적용해주세요.

input::-webkit-input-placeholder { color:red; } //크롬, 사파리 브라우저
input::-moz-placeholder { color:red; } //파이어폭스 브라우저
input::-ms-input-placeholder { color:red; } //ie 브라우저

 

 

 

단 placeholder는 ie10 이상에서만 적용되니까 이점 주의해주세요.
ie10 이하에서는 placeholder가 value값 적용한것처럼 출력됩니다.