コーディング作業中に一瞬ハマってしまったのでメモ。
フォーム周りの送信ボタンのコーディングの際に右側に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); }
input要素に普通にclassをつけれれば問題無いんでしょうが、例えば自動出力でinput要素にclassやidをつけれない場合は単にinputプロパティでCSSを適用すると、全部のinput要素に反映されてしまいますので、「送信ボタン」や「テキストボックス」など、個別にCSSを適用したい場合は以下のような書き方が有効です。
input[type="text"] input[type=“submit”]{ /* CSSの記述を書く */ }
普通のCSSの記述と同じように前の階層と入れ子にすれば、個別に設定できますね。
.Box01 input[type=“submit”]{ /* CSSの記述を書く */ }
iphoneというか、付属ブラウザのsafariでの話ですが、このブラウザの初期値で角丸やグラデーションがボタンにかかっていて、全然違う見た目のボタンになる場合があります。
input[type="text"], input[type="submit"], input[type="button"]{ -webkit-appearance: none; }
デフォルト値を全て無視して、完全CSSを反映させたい場合は、上記コードをリセットCSSとして、記述しておけばOKです。実機確認での発見が多い現象なので、最初からリセットしておけば安心です。