Inputタグのplaceholder、disabledの装飾

  • 2020年4月10日
  • 2021年7月5日
  • scss
  • 128view

自分用の備忘録。

フォームでよく使われる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が当たります。

以上。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping