Inputタグのplaceholder、disabledの装飾

自分用の備忘録。

フォームでよく使われるInputタグのplaceholderやdisabledの時に装飾方法です。

特に装飾していない状態だとInputタグは以下の様になります。

「現在のメールアドレス」は入力できない様にdisabledを施していますが、色が一緒な為、気が付きにくいです。

また「新しいメールアドレス」はplaceholderの文字が大きすぎる為、窮屈だし、文字色も薄めにしたいです。

以下の画像の様な状態を目指します。

やり方

scssのみ記入します。

 .Input {

      &:disabled {
        background-color: #fafafa;
      }

      &::placeholder {
        color: #b0b0b1;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 18px;
      }
    }

この様に擬似要素とすると、Inputタグ内のdisabledやplaceholderにcssが当たります。

以上。