【CSS】inputタグのボタンに疑似要素などで装飾する2つの方法

【CSS】inputタグのボタンに疑似要素などで装飾する2つの方法 CSS
【CSS】inputタグのボタンに疑似要素などで装飾する2つの方法
2023.11.01
スポンサーリンク

Web制作でホームページなどを構築する時、お問い合わせフォームを実装することが多いかと思います。

お問い合わせフォームには問い合わせ内容を入力した後にinputタグで送信をボタンを作成することがありますが、このボタンに疑似要素で矢印などの装飾をしようとしたところ、疑似要素が表示されなくて困ったことはありませんか？

ここは意外と駆け出しの頃につまづくポイントで、私も何時間も悩んだ経験があります。

WordPressでよく使用されるお問い合わせフォームプラグイン「Contact Form 7」でも、出力される送信ボタンはinputタグなので、inputタグへの装飾方法をご紹介しますね。

本記事の執筆者：マサトラ

フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。

スポンサーリンク

inputタグのボタンに疑似要素を付与しようとするとどうなるか

まず、状況をおさらいします。

inputタグに疑似要素を付与するために、以下のCSSを当ててみます。

<div class="block">
  <p>inputタグに疑似要素を付けようとしてもダメなパターン</p>
  <input type="submit" value="送信する" class="btn">
</div>
.btn {
  position: relative;
  /* ボタンのデザインに関するCSSは省略 */
}

.btn::after {
  position: absolute;
	content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  right: 16px;
}

では、実際にどうなるかCODE PENで確認してみると、以下のとおり疑似要素の矢印が表示されていません。

See the Pen inputタグに疑似要素を適用させる by Sugar (@ms_da_13) on CodePen.

では、この状況を解決するために、inputタグを装飾する方法を2つご紹介していきます。

なお、HTMLを変更できる場合は、内容を持てる<button type="submit">を使うのが最も素直です。inputは子要素や終了タグを持たない空要素なので、既存プラグインの出力などでinputを変更できない場合に、以下の方法を使いましょう。

方法①　inputタグのボタンをdivで囲み、そこに疑似要素を付与する

inputタグに直接疑似要素を適用できないのであれば、inputタグをdivで囲み、そこに疑似要素を付与する方法があります。

サンプルのCSSは以下のとおりとなります。

btnクラスを、divタグbtn-wrapperで囲みます。

ポイントは囲んだdivタグにdisplay: inline-blockを指定することです。

これによって、btn-wrapperのサイズは、内包するbtnクラスと同じになります。

<div class="block">
  <p>inputタグをdivで囲み、そこに疑似要素を付けるパターン</p>
  <div class="btn-wrapper">
    <input type="submit" value="送信する" class="btn btn02">
  </div>
</div>
.btn {
  /* ボタンのデザインに関するCSSは省略 */
}

.btn-wrapper {
  position: relative; /* 疑似要素の基準にする */
  display: inline-block; /* 要素の範囲をボタンに合わせる */
}

.btn-wrapper::after {
  position: absolute;
	content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  right: 16px;
}

では、実際にCODE PENで表示を確かめてみましょう。

See the Pen inputタグに疑似要素を適用させる by Sugar (@ms_da_13) on CodePen.

疑似要素で矢印が表示されていることが確認できたかと思います。

これが、inputタグ使用時にボタンを装飾する方法の1つです。

スポンサーリンク

方法②　backgroundプロパティでinputタグのボタンに装飾する

inputタグを装飾するもう1つの方法は、疑似要素ではなく、backgroundプロパティを使用する方法があります。

サンプルのCSSは以下のとおりとなります。

ポイントは、background-positionの位置調整です。

background-position: right 16px center; では、

right 16px = 要素の右端から16pxの位置

center = 上下中央の位置

を指定しています。

<div class="block">
  <p>inputタグにbackgroundプロパティで装飾するパターン</p>
  <input type="submit" value="送信する" class="btn">
</div>
.btn {
  /* ボタンのデザインに関するCSSは省略 */

  background-image: url("/images/arrow-right.svg"); /* 実際の画像パスへ変更 */
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 16px center;
}

では、CODE PENで表示を確認してみましょう。

See the Pen inputタグに疑似要素を適用させる by Sugar (@ms_da_13) on CodePen.

backgroundプロパティでも矢印が表示されて、装飾できていることが確認できたかと思います。

(補足)ホバーアクション(hover)には対応できるか

実際にWeb制作でボタンをコーディングする場合、ホバーアクションを付与することが多いかと思います。

ここまで紹介したdivタグで囲む方法①、backgroundプロパティを使用する方法②、どちらもhoverを使用してホバーアクションを付与することが可能です。

従来どおり、ホバーアクションを付与させたい要素に「:hover」を付けてCSSを記述すればOKです。

本記事の例で言うと、方法①であればdivタグ「btn-wrapper」、方法②であれば「inputタグ」ですね。

まとめ

WordPressでお問い合わせフォームを実装する際、Contact Form 7などのプラグインを使用することが多いですが、プラグインで生成されるHTMLをキチンと把握していないと、デザインカンプどおりにコーディングすることができません。

  • Contact Form 7では送信ボタンはinputタグで生成される
  • inputは空要素のため、疑似要素へ依存しない実装にする
  • inputタグをdivで囲み、そこに疑似要素を付与するか
  • もしくは、inputタグにbackgroundプロパティを当てて装飾する
  • どちらの方法もhover適用可能

上記のことを予め把握しておき、良いお問い合わせフォームを実装していただければと思います。

スポンサーリンク