【CSS】placeholderの色を変更しつつ、フォーカス時には非表示にする方法

inputのplaceholderが見えにくい場合に、CSSで色を変えたり、フォーカス時に非表示にする方法を紹介。フォームの視認性やデザイン改善に使える小技です。

placeholder(プレースホルダー)とは、ウェブサイトのフォームなどの入力欄にあらかじめ記入されているテキストのことです。入力例や注釈としてよく使われます。

今回は、そんなinputまわりのplaceholderの色を、CSSで変更する方法を紹介します。

また、ユーザビリティの観点からフォーカス時にはplaceholderを非表示にする小技もまとめておきます。

See the Pen placeholderの色を変更しつつ、フォーカス時には非表示にする by MEMORUKA (@memoruka) on CodePen.

背景色・暗色系のフォームではデフォルトだと見辛くなる

ほとんどのケースではデフォルトのplaceholderで問題ありませんが、背景色付きのデザインや、暗色系のフォームでは、placeholderの文字が見辛くなることもあります。

そんなときのために、placeholderの色を明示的にCSSで調整します。

placeholder(プレースホルダー)要素の色を変更する方法

/* 全てのプレースホルダーに適用 */
::placeholder {
    color: #ff5555;
}

/* クラスで個別指定はこちら */
.preset-color-white::placeholder {
    color: #ffffff;
}

フォーカス時にplaceholder(プレースホルダー)を非表示にする方法

また、placeholderの色が濃いと「既に入力済みの文字列」と誤認される可能性があるので、ユーザビリティーも意識して、フォーカス(選択)時にはplaceholderの文字列を非表示にする小技も併せて紹介します。

:focus::placeholder {
    color: transparent !important;
}

実際の使用を想定したデモ

デモがこちら。

自分なら、inputのスタイル内にネストして一括で指定しちゃいます。

/* フォーカス時は非表示 */
:focus::placeholder {
    color: transparent !important;
}

/* inputの基本スタイル */
.input-style {
    box-sizing: border-box;
    width: 400px;
    font-family: "Yu Gothic", "Meiryo", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Arial", sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 0.5em 1em;
    border: 1px solid #ccc;
    line-height: 1;

    /* 特定テーマ用（背景が暗い場合など） */
    &.preset-color-white {
        color: #fff;
        background: #333;

        &::placeholder {
            color: #fff;
        }

    }

}

See the Pen placeholderの色を変更しつつ、フォーカス時には非表示にする by MEMORUKA (@memoruka) on CodePen.

参考にどうぞ。デザインに合わせて調整してみてください。