input要素のplaceholder属性にスタイルを適用させる – 『CSS』

table of contents

    inputで入力を補助するためのplaceholder

    placeholder属性でinput要素やtextarea要素に記入例やヒントを表示させることができます。
    デザインによってはブラウザのデフォルトスタイルから変更したい時がありますが、その時に必要になるtipsです。

    今のところブラウザ毎にプレフィクスを記述する必要があります。

    css

    
    /* Chrome Safari Opera 15+ Android iOS */
    .ex-input::-webkit-input-placeholder {
      color: black;
      opacity: 1;
    }
    /* IE10+ */
    .ex-input:-ms-input-placeholder {
      color: black;
      opacity: 1;
    }
    /* Firefox19+ */
    .ex-input::-moz-placeholder {
      color: black;
      opacity: 1;
    }
    
    

    上記コードではclass指定していますが、属性セレクタの[type="text"][type="password"]というように指定してあげることもできます。

    上記以外のスタイルのプロパティ(text-shadowとか)も適用させることができます。

    おわります。

    input要素のplaceholder属性にスタイルを適用させる – 『CSS』のアイキャッチ画像

    share

    related