넓리 사용되는 입력폼 중 하나인 input 태그는 다양한 속성을 가지고 있습니다. 그 중에서도 사용자가 아무것도 입력하지 않았을때 팁으로 텍스트를 보여주는 속성이 바로 placeholder 속성입니다.
# input 태그 placeholder 색 바꾸기
이 속성은 아래와 같이 사용됩니다. 아래를 보시면 여기에 입력하세요란 텍스트가 있죠.
질문: 당신의 이름은 무엇입니까?
이처럼 input 태그 안에는 브라우저 디폴트값으로 색깔이 보일 수 있습니다. 즉, 브라우저의 디펜던시로 기본 컬러값이 설정되어 있는거죠. 만약 이 색상을 바꾸기 위해서는 어떻게 해야할까요? 먼저 이를 바꾸기 위해서는 pseudo 선택자를 사용해 가능합니다. 예를들면...
input::-webkit-input-placeholder { color: #f00; }
위의 방법은 간단하게 표현한 코드 모습니다. 만약 실제 코드로 작성한다면 웹킷(webkit) 뿐 아니라 크로스브라우징을 위해 CSS에 선언할때 아래의 속성들처럼 선언해 주어야합니다.
# placeholder 색상 변경 사용예제
아래 예제는 input 태그 입력폼을 하나 만들고 색을 바꾸어보는 예제입니다. @ placeholder.html
<div> 이름: <input type="text" placeholder="이곳에 입력하세요" /> </div>
@ placeholder.css
input::-ms-input-placeholder { color: #f00; } // Internet Explorer 10 이상에 적용
input::-webkit-input-placeholder { color: #f00; } // Webkit, Blink, Edge에 적용
input::-moz-placeholder { color: #f00; } // Mozilla Firefox에 적용
위 방법으로 다양한 브라우저의 placeholder에 적용된 색을 변경하는 것이 가능합니다. 주석을 제거하고 한 줄로 나타내면 아래와 같습니다.