CSS로 placeholder 숨기기/색상 변경하기

placeholder는 HTML5에 추가된 속성으로, 입력폼에 들어가야 할 값을 미리 보여주는 힌트 역할을 합니다. placeholder를 숨기고 싶은 경우 CSS로 placeholder 색상을 입력폼의 배경색과 동일하게 변경하거나 투명색(transparent)으로 바꿀 수 있습니다.

CSS로 placeholder를 숨기기/색상 변경하기

워드프레스에 검색바를 표시할 때 그림과 같이 Search ... 문구가 검색 입력폼에 placeholder로 표시되는 경우가 있을 수 있습니다.

이 경우 Loco Translate와 같은 플러그인을 사용하여 Search ... 문구를 한글로 번역하는 것이 가능할 수 있습니다.

다른 방법으로 placeholder 색상을 투명으로 바꾸거나 입력폼의 배경색으로 변경하여 숨기는 것을 고려할 수 있습니다.

가령 다음과 같은 HTML 입력폼에서 placeholder 부분을 숨기고 싶은 경우:

<input name="name" type="text" placehoder="Search ...">

Stackoverflow 문서 "hide placeholder with css"에서는 다음과 같은 CSS 코드를 제안하고 있습니다.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 모질라 파이어폭스 4 ~ 18 */
    color:    #fff;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ 모질라 파이어폭스 19 이상 */
    color:    #fff;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ 인터넷 익스플로러 10 이상 */
    color:    #fff;
}

위의 코드를 사용하면 대부분의 브라우저에서 placeholder 텍스트가 브라우저에서 표시되지 않을 것입니다. textarea까지 감안하는 경우 다음과 같은 코드도 가능합니다.

::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     :-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     input::placeholder {
         color: transparent;
    }
     textarea::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     textarea::placeholder {
         color: transparent;
    }

여기서는 color 값으로 transparent를 지정했는데요, 입력폼의 배경색으로 지정해도 동일한 효과를 얻을 수 있을 것입니다.

color: transparent 대신 opacity: 0을 사용해도 작동합니다. 최신 브라우저에서 작동하지 않을 경우 color: transparent 대신 opacity: 0을 사용하여 테스트해보시기 바랍니다.

::-webkit-input-placeholder {
        /* WebKit 브라우저 */
        opacity: 0;
    }
     :-moz-placeholder {
        /* Mozilla 파이어폭스 4 ~ 18 */
         opacity: 0;
    }
     ::-moz-placeholder {
        /* Mozilla 파이어폭스 19 이상 */
         opacity: 0;
    }
     :-ms-input-placeholder {
        /* IE 10 이상 */
        opacity: 0;
    }
     input::placeholder {
       opacity: 0;
    }
     textarea::-webkit-input-placeholder {
        /* WebKit 브라우저 */
       opacity: 0;
    }
     textarea:-moz-placeholder {
        /* 모질라 파이어폭스 4 ~ 18 */
         opacity: 0;
    }
     textarea::-moz-placeholder {
        /* 모질라 파이어폭스 19+ */
        opacity: 0;
    }
     textarea:-ms-input-placeholder {
        /* 인터넷 익스플로러 10+ */
        opacity: 0;
    }
     textarea::placeholder {
        opacity: 0;
    }

참고로 다음 CSS 코드를 사용하면 입력폼에 마우스를 클릭할 때에만 placeholder 텍스트가 표시됩니다.

:not(:focus)::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}
:not(:focus):-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}
:not(:focus)::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}
:not(:focus):-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}

CSS를 사용하면 실제로는 placeholder 텍스트가 로드되지만 브라우저에서만 사용자에게 표시되지 않습니다. placeholder를 완전히 제거하고 싶은 경우에는 "Remove input placeholder using jquery" 문서에서 제시하는 다음과 같은 jQuery를 사용할 수 있습니다.