Jump to the content

テキストボックスのプレースホルダーのスタイルを変更する

CSS

    どうも、イソップです。

    フォームの実装をしていると、プレースホルダーの文字色を変更したい、なんてことが結構ありますよね。

    何度書いても忘れてしまうので、記事にしておきます。

    プレースホルダー装飾用の疑似セレクタ

    各ブラウザごとに選択の方法が用意されています。

    ::-webkit-input-placeholder { /* Chrome, Opera */
        color: #a0a0a0;
    }
    
    :-moz-placeholder { /* Firefox 19+ */
        color: #a0a0a0;
    }
    
    :-ms-input-placeholder { /* IE 10+ */
        color: #a0a0a0;
    }
    

    なかなかクールです。

    指定できるプロパティ

    プレースホルダーには、次のプロパティを指定できます。

    • font
    • color
    • background
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • text-indent
    • opacity

    しかしすべてに適用できるわけではない模様。要検証ですね。

    アニメーションとかできたら面白いかもしれませんね。

    参考

    ::placeholder | CSS-Tricks

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×