2022年5月8日 / 最終更新日時 : 2022年5月8日 info@rishuntrading.co.jp

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

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

1.使われるシーン

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

実際のボタンの例

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

HTML

<input name="blog-submit-test" type="button" class="blog-submit-test" value="送信" />

1	<input name="blog-submit-test" type="button" class="blog-submit-test" value="送信" />

CSS

.blog-submit-test{
    display:flex;
    justify-content: center;
    align-items: center;
    width:250px;
    height:50px;
    background:#6495ED;
    color:#fff;
    border:none;
    font-size:20px;
    border-radius:5px;
    box-shadow:3px 3px 3px #aaa;
    transition:all 0.3s;
}
.blog-submit-test:active{
    transform:translate(3px, 3px);
    box-shadow:none;
}
.blog-submit-test:hover{
    filter:brightness(1.2);
}

.blog-submit-test{

display:flex;

justify-content: center;

align-items: center;

width:250px;

height:50px;

background:#6495ED;

color:#fff;

border:none;

font-size:20px;

border-radius:5px;

box-shadow:3px 3px 3px #aaa;

transition:all 0.3s;

}

.blog-submit-test:active{

transform:translate(3px, 3px);

box-shadow:none;

}

.blog-submit-test:hover{

filter:brightness(1.2);

}

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

実際のボタンの例

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

HTML

<input name="blog-submit-test" type="button" class="blog-submit-test" value="送信" disabled="disabled"/>

1	<input name="blog-submit-test" type="button" class="blog-submit-test" value="送信" disabled="disabled"/>

CSS

.blog-submit-test{
    display:flex;
    justify-content: center;
    align-items: center;
    width:250px;
    height:50px;
    background:#6495ED;
    color:#fff;
    border:none;
    font-size:20px;
    border-radius:5px;
    box-shadow:3px 3px 3px #aaa;
    transition:all 0.3s;
}
.blog-submit-test:disabled{
    filter:brightness(0.8);
    cursor:not-allowed;
}
.blog-submit-test:active{
    transform:translate(3px, 3px);
    box-shadow:none;
}
.blog-submit-test:hover{
    filter:brightness(1.2);
    transform:none;
}

.blog-submit-test{

display:flex;

justify-content: center;

align-items: center;

width:250px;

height:50px;

background:#6495ED;

color:#fff;

border:none;

font-size:20px;

border-radius:5px;

box-shadow:3px 3px 3px #aaa;

transition:all 0.3s;

}

.blog-submit-test:disabled{

filter:brightness(0.8);

cursor:not-allowed;

}

.blog-submit-test:active{

transform:translate(3px, 3px);

box-shadow:none;

}

.blog-submit-test:hover{

filter:brightness(1.2);

transform:none;

}

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

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

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

実際のボタンの例

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

HTML

<input name="blog-submit-test" type="button" class="blog-submit-test2" value="送信" disabled="disabled"/>

1	<input name="blog-submit-test" type="button" class="blog-submit-test2" value="送信" disabled="disabled"/>

CSS

.blog-submit-test2{
    display:flex;
    justify-content: center;
    align-items: center;
    width:250px;
    height:50px;
    background:#6495ED;
    color:#fff;
    border:none;
    font-size:20px;
    border-radius:5px;
    box-shadow:3px 3px 3px #aaa;
    transition:all 0.3s;
}
.blog-submit-test2:active{
    transform:translate(3px, 3px);
    box-shadow:none;
}
.blog-submit-test2:hover{
    filter:brightness(1.2);
}
.blog-submit-test2:disabled{
    filter:brightness(0.8);
    cursor:not-allowed;
    transform:translate(-3px, -3px);
    box-shadow:3px 3px 3px #aaa;
}