[CSS] placeholder 색상, 스타일 지정하는 방법

html5가 되면서 텍스트 박스의 placeholder 에 스타일을 지정할 수 있게 되어 이를 정리 해봅니다.

placeholder

먼저 placeholder 가 뭐지 하시는 분들은 아주 간단하게 생각해서 type 이 text 인 input 요소나, textarea 태그로 만들어진 텍스트 박스에 사용자가 뭔가 입력 하기 전에 해당 텍스트 박스에 들어 있는 간단한 내용을 생각하면 됩니다.

위 그림을 보면 각 텍스트 박스에 해당 텍스트 박스에 어떤 것을 입력하는 것인지 표시하는 Leave a comment here, Name, Email(not be published) 와 같은 문구가 있는데, 이게 바로 placeholder 입니다.

이 placeholder 는 스타일이 미리 지정 되어 있어 배경이 밝은 곳에서는 문제가 없지만, 텍스트 박스의 배경이 어두운 색이면 잘 보이지 않아 불편한 경우가 있습니다.

::placeholder

CSS 를 이용하여 이 placeholder 의 색상을 바꾸기 위해서는 CSS 의 ::placeholder 를 사용하면 됩니다. 아래는 CSS 를 이용해 간단하게 placeholder 의 색상을 변경 하는 방법입니다.

textarea::placeholder { color: #ccc; }

위 CSS 코드는 textarea 의 placeholder 를 좀 더 밝은 회색인 #ccc 로 바꿔줍니다.

하지만 이 ::placeholder 선택자는 현재 크롬, 파이어폭스, 오페라, 사파리 10.1+ 에서는 잘 작동하지만, 유독 마이크로소프트의 브라우저에서는 잘 작동하지 않습니다. 그래서 아래와 같이 마소의 브라우저에서도 작동하도록 코드를 추가해주는 것이 좋습니다.

IE

textarea:-ms-input-placeholder {    color: #ccc; }

구형이 되어버린 마이크로소프트의 인터넷 익스플로러(IE)에서도 잘 작동하도록 -ms-input-placeholder 선택자를 이용해 같은 스타일을 지정 해줍니다.

엣지

마찬가지로 마이크로소프트의 엣지(Edge)에서도 잘 작동하도록 아래 코드 역시 추가 해줍니다.

textarea::-ms-input-placeholder { color: #ccc; }

위 IE 의 경우와 다른점은 콜론(:)이 두 개라는 점입니다.

끝.