CSSでplaceholderを隠す/色を変更する

placeholderはHTML5に追加されたプロパティで、入力フォームに入力する必要がある値を事前に示すヒントとして機能します。プレースホルダを非表示にしたい場合は、CSSでプレースホルダの色を入力フォームの背景色と同じに変更するか、透明色に置き換えることができます。

WordPressに検索バーを表示すると、図のように 検索... フレーズが検索入力フォームにplaceholderとして表示されることがあります。

この場合、Loco Translateなどのプラグインを使用して 検索... フレーズをハングルに翻訳することが可能かもしれません。

別の方法では、プレースホルダーの色を透明に変更したり、入力フォームの背景色に変更して非表示にしたりできます。

たとえば、次の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;
}

上記のコードを使用すると、ほとんどのブラウザでは、プレースホルダテキストがブラウザに表示されません。 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 を指定しましたが、入力フォームの背景色で指定しても同じ効果が得られます。

色：透明 代わりに 不透明度：0使用しても動作します。最新のブラウザで動作しない場合 色：透明 代わりに 不透明度：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コードを使用すると、入力フォーム上でマウスをクリックしたときにのみプレースホルダテキストが表示されます。

: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を完全に削除したい場合は、jquery を使用して入力プレースホルダーを削除する「ドキュメントで提供されている次のjQueryを使用できます。

$(':input').removeAttr('placeholder');

WordPressにカスタムCSSコードを追加する

WordPressでは、カスタムCSSコード WordPress 管理者ページ » ルックス » カスタマイズ » 追加 CSSに追加できます。 CSSコードを追加すると、リアルタイムで適用するかどうかを確認できます。