疑似要素を使ったらクリックできなくなった話とその解消法

2020年5月25日

先日、メールフォーム部分のコーディング時、装飾のため疑似要素:beforeを使用したら、フォームをクリックして選択することができなくなりました。

調べたところ、それを解消する方法がありましたのでご紹介します。

現象の再現

クリックできない現象を具体的に説明すると、例えば下は、全体の外枠を二重にする為に疑似要素:beforeを使っています。

これはフォームではなくリンクボタンですが、本来<a href=""></a>で作成しているのでクリックできるはずですが、疑似要素があるためクリックできません(これがリンクでなくフォームでも同様にクリックできません)。

このHTMLとCSSは、それぞれ以下のように設定しています。

とはいえ、今回の再現で重要なのは「疑似要素が使われていること」ですので、参考までにご覧ください。

HTML

<div class="inner_box">
    <a href="#" class="example">Click</a>
</div>

CSS

.inner_box {
    position:relative;
}
.inner_box:after {
    content: "";
    display: block;
    position: absolute;
    border: 4px solid #fff;
    top: 4px;
    left: 4px;
    width: calc(100% - 20px);
    min-height: calc(100% - 20px);
    border: 6px solid #ccc;
}
.example {
    display: inline-block;
    width:200px;
    height:60px;
    line-height: 60px;
    background: #338DC9;
    text-align: center;
    color:#fff;
    text-decoration: none;
}

クリックできなくなった際の解消法

それではこういった場合にどう対処したら良いかといいますと、疑似要素にpointer-events: none;を追加したら良いです。

CSS(疑似要素のみ)

.inner_box:after {
    content: "";
    display: block;
    position: absolute;
    border: 4px solid #fff;
    top: 4px;
    left: 4px;
    width: calc(100% - 20px);
    min-height: calc(100% - 20px);
    border: 6px solid #ccc;
    pointer-events: none;
}

できあがったもの

というわけで、疑似要素を使用した際のクリック(マウスイベント)について紹介しました。