ブログBlog

<input type=”submit”>に疑似要素を適用したい。

「各種ボタン」などは、装飾のため矢印(>)、画像やアイコンなどを付ける事が多々あるかと思います。そのために、該当ボタンのタグの疑似要素(:before/:after)を使ってボタンの上に設置します。

<a>タグなどは、疑似要素で設置できるものの、<input>タグは疑似要素が使えません。

そのため、「お問い合わせフォーム」の「送信」ボタンなどに使われる<input type=”submit” >のようなボタンには、そのままでは装飾ができません。

では、どうすればできるのかというご紹介となります。

<input>タグでは疑似要素が使えない

<input type=”submit”>の:afterの疑似要素に、fontawesomeの”“のアイコンを設置していますが、利用できません。【fontawesome】についてはこちらを参照。

HTML文

CSS文

同様に<a>タグの場合

<a>タグでは疑似要素が使えるので、fontawesomeのアイコンが設置可能。

HTML文

CSS文

解決策

<input type=”submit” />を<div>で括り、<div>の疑似要素で設置して上げれば良いです。

HTML文

CSS文

皆さまのお役に立てれば幸いです。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU