placeholder属性のテキストカラー変更

[ ID : 1120 ]
placeholder属性のテキストカラー変更

概要

input要素などの入力欄に初期表示する内容を指定することができるplaceholder属性の色を変更する方法を紹介。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装方法


SCSS

.placeholder {

&::placeholder {
color: #007bbb;
}
//Firefox
&::-moz-placeholder {
opacity: 1;
}
}

CSS

.placeholder::-moz-placeholder {
    color: #007bbb;
}
.placeholder::placeholder {
    color: #007bbb;
}
.placeholder::-moz-placeholder {
    opacity: 1;
}

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録