WEB系キャンパス

CSSのbeforeやafterを送信ボタンで使う場合の対策とコーディング時の注意点

button-before-after

コーディング作業中に一瞬ハマってしまったのでメモ。
フォーム周りの送信ボタンのコーディングの際に右側にafter要素を使ってアイコンを設置しようとした時に、何をやってもアイコンを表示させれなかった。

↓こんなの
button-image

調べてみると、input要素にはbeforeやafterのような疑似要素は効かないらしい。

アイコンを表示させれない(疑似要素が効かない)inputで記述

<input type="submit" value="送信する" class="submitbtn"/>

アイコンを表示させれる(疑似要素が効く)button要素

<button type="submit" class="submitbtn">送信する</button>    
.submitbtn{
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f4196b;
  color: #fff;
  padding: 10px 50px;
  font-size: 13px;
}
.submitbtn:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

装飾をしたいならinputタイプsubmitを使わずにbuttonで統一すればいいんじゃないでしょうか?
とはいえ、CMSの代表格のWordpressの代表的問い合わせフォームのプラグインである「ContactForm7」や「MW WP Form」の送信ボタンはinput要素のはずなので、input要素にafterを使いたい場面はでてくるんじゃないでしょうか?

そんな場合はinput要素の外側にdivで囲えば、好きなように装飾ができます。
若干、無理矢理感がありますが…。

<div class="submitbtn02">
  <input type="submit" value="送信する"/>
</div>
.submitbtn02{
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f4196b;
  color: #fff;
  font-size: 13px;
}
.submitbtn02:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

DEMO

【補足】idやclassをつけれない場合のCSSの書き方

input要素に普通にclassをつけれれば問題無いんでしょうが、例えば自動出力でinput要素にclassやidをつけれない場合は単にinputプロパティでCSSを適用すると、全部のinput要素に反映されてしまいますので、「送信ボタン」や「テキストボックス」など、個別にCSSを適用したい場合は以下のような書き方が有効です。

input[type="text"]
input[type=“submit”]{
/* CSSの記述を書く */
}

普通のCSSの記述と同じように前の階層と入れ子にすれば、個別に設定できますね。

.Box01 input[type=“submit”]{
/* CSSの記述を書く */
}

【補足】input要素での装飾でiphoneでの注意点

iphoneというか、付属ブラウザのsafariでの話ですが、このブラウザの初期値で角丸やグラデーションがボタンにかかっていて、全然違う見た目のボタンになる場合があります。

input[type="text"],
input[type="submit"],
input[type="button"]{
-webkit-appearance: none;
}

デフォルト値を全て無視して、完全CSSを反映させたい場合は、上記コードをリセットCSSとして、記述しておけばOKです。実機確認での発見が多い現象なので、最初からリセットしておけば安心です。

Comment Form