疑似要素CSSのbeforeやafterを送信ボタンで使う場合の対策とコーディング時の注意点HOMEHTML/CSSCSSのbeforeやafterを送信ボタンで使う場合の対策とコーディング時の注意点コーディング作業中に一瞬ハマってしまったのでメモ。フォーム周りの送信ボタンのコーディングの際に右側にafter要素を使ってアイコンを設置しようとした時に、何をやってもアイコンを表示させれなかった。↓こんなの調べてみると、input要素にはbeforeやafterのような疑似要素は効かないらしい。rotate(45deg);}DEMO【補足】idやclassをつけれない場合のCSSの書き方input要素に普通にclassをつけれれば問題無いんでしょうが、例えば自動出力でinput要素にclassやidをつけれない場合は単にinputプロパティでCSSを適用すると、全部のinput要素に反映されてしまいますので、「送信ボタン」や「テキストボックス」など、個別にCSSを適用したい場合は以下のような書き方が有効です。*/}普通のCSSの記述と同じように前の階層と入れ子にすれば、個別に設定できますね。*/}【補足】input要素での装飾でiphoneでの注意点iphoneというか、付属ブラウザのsafariでの話ですが、このブラウザの初期値で角丸やグラデーションがボタンにかかっていて、全然違う見た目のボタンになる場合があります。none;}デフォルト値を全て無視して、完全CSSを反映させたい場合は、上記コードをリセットCSSとして、記述しておけばOKです。実機確認での発見が多い現象なので、最初からリセットしておけば安心です。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。