コーディング作業中に一瞬ハマってしまったのでメモ。
フォーム周りの送信ボタンのコーディングの際に右側に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です。実機確認での発見が多い現象なので、最初からリセットしておけば安心です。