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를 사용할 수 있습니다.
$(':input').removeAttr('placeholder');
워드프레스에 커스텀 CSS 코드 추가하기
워드프레스에서는 사용자 정의 CSS 코드를 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다. CSS 코드를 추가하면 실시간으로 적용 여부를 확인할 수 있습니다.
댓글 남기기