Inputタグのplaceholder、disabledの装飾

Inputタグのplaceholder、disabledの装飾

v-ifで条件分岐をしよう!(Vue入門③例題付き) (21)

自分用の備忘録。

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

以上。

Leave A Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


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
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping