Placeholder 스타일 적용하기

 

Placeholder의 스타일 변형은 표준이 아니다. 따라서 브라우저에서 제공하는 기능을 사용하여 Placeholder의 스타일을 변경할 수 있다.

 

문제 발생

Placeholder의 스타일 변형은 표준이 아니기 때문에 placeholder의 스타일을 표준 css로 변경 불가능하다.

HTML

 <input type="text" placeholder="test text">

CSS

/*CSS 입력하지 않음*/

문제 해결

각 브라우저에서 제공하는 placeholder 변형 기능을 활용하여 placeholder의 스타일을 변경한다. 이때 각 브라우저의 접두사를 붙여 스타일을 정의해야 하며, 오페라는 placeholder의 스타일 변형을 지원하지 않는다.

 

1. 브라우저 별 접두사
   1. 크롬 : Webkit 
   2. 익스플로러, 엣지 : ms 
   3. 파이어폭스 : moz 
   4. 오페라 : o

HTML

<input type="text" class="input--text" placeholder="test text">

CSS

.input--text::-webkit-input-placeholder{color:#c5bbff;}
.input--text::-ms-input-placeholder{color:#c5bbff;}
.input--text::-moz-input-placeholder{color:#c5bbff;}