CSS

input要素に擬似要素を適用させたい

ここでは、input要素でボタンに擬似要素を適用させたい方が参考になりそうなお話をします。結論から言うと、input要素に疑似要素は適用できません。

例えば、リンクタグならこういうデザインが素直に作れるわけですが(疑似要素で右に矢印を入れています)。

ボタンで表示を切り替えてご覧ください。

See the Pen button01 by kenichi (@ken81) on CodePen.

input要素をボタンにしたものでは同じように行きません。

See the Pen button02 by kenichi (@ken81) on CodePen.


上記は、inputタグに同じスタイルシートを適用させた例です。

input要素は置換要素といって少し特殊な要素のため疑似要素が効きません。でも、お問合せフォームなどで送信ボタンがinput要素になっている場合はどうしたらよいでしょうか。そういうときは、次のようにします。

See the Pen button03 by kenichi (@ken81) on CodePen.


どうしてもinput要素に疑似要素を入れたい場合は、inputをdiv要素などでラップして、それに対してにスタイルシートを組みます。これで、実装できましたね。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP