0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【input】disabled属性が無効/有効化でボタンの色を変えたい

Posted at

初投稿です。忘備録になります。

フォームの送信ボタンをdisabled属性が無効/有効の時で色を分けたいなと思い、
(その方がユーザビリティ的に良いと思うので)
調べた結果、下記にたどり着きました。

<HTML>
image.png

<SCSS>
image.png

まずHTMLのinputタグにdisabledを付けるのをお忘れなく。
私は最初つけていなくてずっとdisabled効かない、、!となっていました。
ついていないんですから、効くわけないですね。

ボタンの装飾のコードは参考程度に。みんな違ってみんないいなので。
大事なのは
【input[type='submit']】にdisabledが無効の時のボタンの装飾
【input[type='submit']:disabled】にdisabledが有効の時のボタンの装飾
を書きます。

そうしますと、下記の画像のようになります。

【disabled有効】
image.png

【disabled無効】
image.png

できて当たり前かもしれないのですが、
忘れないように投稿させていただきました。
どのようなときにdisabledを有効/無効にするなどの設定は
jqueryやjavascriptで設定してください。

私と同じようなところで手が止まっている方の
お役に立てれば嬉しいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?