웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

input 태그 placeholder 텍스트 색상 변경하기

Last Modified : 2020-01-20 / Created : 2015-10-23
38,490
View Count

넓리 사용되는 입력폼 중 하나인 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에 적용된 색을 변경하는 것이 가능합니다. 주석을 제거하고 한 줄로 나타내면 아래와 같습니다.
input::-ms-input-placeholder { color: #f00; }
input::-webkit-input-placeholder { color: #f00; }
input::-moz-placeholder { color: #f00; }

여기서 모질라의 경우 -moz-input이 아닌 -moz로 사용하는 점이 차이점입니다. 주의가 필요합니다.


! 주의할 점

만약 정상적으로 나타나지 않는다면 혹시 콤마(,)를 사용하여 여러개를 적용하지 않았는지 확인해보세요. 이 경우 정상적으로 적용되지 않는 경우가 있습니다. 버그일 가능성도 있겠네요. 예를들어 아래처럼 사용하지 마세요.

(X) 사용말 것 !!
input::-ms-input-placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder { color: #f00; }

번거로워도 하나씩 구분하여 적용하시기 바랍니다.



# 마치면서

참고로 이 속성은 IE 10+ 이상에서만 placeholder 속성이 적용됩니다. 그 이하 버전은 적용되지 않으니 당연히 색상 변경도 적용되지 않습니다.

그리고 파이어폭스(FireFox)의 경우 기본 opacity 값이 달라 다소 흐리게 보일 수 있습니다. 이런 경우에도 위 선택자를 사용해 { opacity: 1; }의 값을 주는 것 역시 하나의 방법입니다.

Previous

IE에서 height 100% 사용시 div 태그에 margin-bottom 적용 안되는 현상

Previous

테이블 태그 colgroup 알아보기