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

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

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

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

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

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

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

<div class="block">
  <p>inputタグに疑似要素を付けようとしてもダメなパターン</p>
  <input type="submit" value="送信する" class="btn"></input>
</div>

.btn {
  position: relative;
  //ボタンのデザインに関するCSSは省略
}

.btn::after {
  position: absolute;
	content: "";
  background-image: url(https://masa-traveller.site/wp-content/uploads/2023/10/arrow-right.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
}

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

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

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

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"></input>
  </div>
</div>

.btn {
  //ボタンのデザインに関するCSSは省略
}

.btn-wrapper {
  position: relative; //疑似要素を付与するために指定
  display: inline-block; //インラインブロックにして要素の範囲をbtnに合わせる
}

.btn-wrapper::after {
  position: absolute;
	content: "";
  background-image: url(https://masa-traveller.site/wp-content/uploads/2023/10/arrow-right.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
}

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

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

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

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

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"></input>
</div>

.btn {
  //ボタンのデザインに関するCSSは省略

  background-image: url(https://masa-traveller.site/wp-content/uploads/2023/10/arrow-right.png); //背景画像の読み込み
  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プロパティでも矢印が表示されて、装飾できていることが確認できたかと思います。

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

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

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

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

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

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

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