【CSS】input要素に擬似要素をつけたい時の対処法

コンタクトフォームでよく使うinput要素に擬似要素を使用したいと思ったのですが、結論から言うとinput要素のような置換要素（終了タグがない要素）には擬似要素は使えません。

そんな場合の対処法をご紹介します。

input要素に擬似要素をつけたい時の対処法

結論は別に難しくもなんでもなく、input要素をdivなどで囲った上でdiv要素に擬似要素をつけてあげればいいです。

See the Pen apply-psuedo-to-input by Takuma (@takushin0202) on CodePen.

inputに擬似要素を使うよくある実例としては、送信ボタンを作る時にinputでtype=”submit”を使い、それに矢印を加えるような上記のパターンかと思います。

HTMLとCSSを見てみます。

<div class="submit-wrap">
  <input type="submit" value="送信">
</div>

HTMLのポイントは上でも書きましたが、inputを擬似要素をつけるためのdivで囲んでいることです。

続いてCSSです。

/* inputをblock化し大きさなど調整 */
input[type="submit"]{
  appearance:none;
  outline:0;
  border:0;
  border-radius:4px;
  font-size:18px;
  display:block;
  cursor:pointer;
  color:#fff;
  background:#3e3e3e;
  padding:10px 60px;
}

/* 擬似要素をつけるためにposition:relative; */
.submit-wrap{
  position:relative;
  display:inline-block;
}

/* 擬似要素 */
.submit-wrap::after{
  position:absolute;
  content:"";
  width:10px;
  height:10px;
  right:15px;
  top:50%;
  border-top:3px solid red;
  border-right:3px solid red;
  transform:rotate(45deg) translateY(-50%);
}

submit-wrapというクラス名をつけたdiv要素に擬似要素をつけて、矢印を表示しています。

こうすることでinput要素に擬似要素をつけることが可能になりましたので参考になれば嬉しいです。