ブログBlog

buttonがdisabledの時のactiveやhoverを無効にする

所沢市でホームページ制作や欧州輸入品販売を行っているRishunTradingです。今回は、お問い合わせフォームなどで使われる<input>タグにおける、type=”submit”や、type=”button”のボタンや、buttonタグを使用したボタンで使われる、disabled属性指定時のhoverやactiveの疑似クラスの無効化方法について記載します。

1.使われるシーン

よく「お問い合わせフォーム」などでは、以下のようなアクションを実装するかと思います。
・「ボタンを押した時のアクション」
・「hoverした時のアクション」

実際のボタンの例

・ボタンが押されると沈む。
・マウスをhoverすると、色が明るくなる。

HTML

CSS

 

また、合わせて「お問い合わせフォーム」などでは、「必須入力項目」が入力されるまでは、「送信ボタン」(submit)は、押せないようにdisabled属性が用いられる場合が多いと思います。

実際のボタンの例

・disabled属性が指定されている状態

HTML

CSS

但し、上記の例では、disabled属性によってボタンが無効になっているにも関わらず、activeとhoverの疑似クラスが効いてしまっています。何も考えないで実装すると、このような事が起こります。今回は、このようにボタンがdisabled属性によって無効化されている際には、同じ様にactiveとhoverの疑似クラスも無効にする方法についてご紹介させて頂きます。

2.disabled時のボタンのactiveとhoverの無効化方法

CSSのdisabledの疑似クラスの処理をactiveとhoverの疑似クラスの後に実施するようにし、disabledの疑似クラスでは、activeの疑似クラスと逆の処理(無効化のため)を実装すれば、スタイルを無効化できます。

実際のボタンの例

・disabledの時、hoverとactiveの疑似クラスも無効化

HTML

CSS

 

以上、皆さまのお役に立てれば幸いです。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU