純粋な CSS3 を使用してラジオ/複数選択ボックスをカスタマイズする style_html/css_WEB-ITnose

フロントエンド開発では、多くの場合、デフォルト要素のスタイルを変更する必要があります。ただし、一部の要素は、対応するスタイルを見つけるのが簡単ではありません。今日の説明の焦点は、 と の 2 つのデフォルト スタイルです。フォーム要素の。

チェックボックスを例に挙げます。
Chrome などの Webkit カーネル ブラウザでは、チェックボックスが選択されていないときのデフォルトのスタイルは次のようになります:

選択後は次のようになります:

うーん、かなり見苦しいです...
もし私たちがスタイルを変更したいのですが、どうすればよいでしょうか?いつものように、そのデフォルト スタイルがどのような属性を持っているかを見てみましょう:

ブラウザのデフォルト スタイルであるユーザー エージェント スタイルシートでは、その属性は複雑ではなく、すべて共通の内容です。これらのスタイルをオーバーライドすることで、サイズ、色、境界線などを変更できます。ただし、中央のフックは変更されたスタイルを直接オーバーライドできないようです。本当か？

-webkit-Appearance という比較的珍しい属性があることに気付きました。これは文字通り「WebKit の外観」を意味します。これは、WebKit コア ブラウザーのスタイルのカスタマイズに関連しているようです。この属性が何であるかを理解しましょう。 w3cschool では、次の説明が表示されます:

定義と使用法
Appearance 属性を使用すると、要素を標準のユーザー インターフェイス要素のように見せることができます。
デフォルト値: 通常
継承: いいえ
バージョン: CSS3 JavaScript
構文: object.style.Appearance="button"

ブラウザのサポート
すべての主要なブラウザは、Appearance 属性をサポートしていません。
Firefox は、代替の -moz-Appearance プロパティをサポートしています。
Safari と Chrome は、代替の -webkit-Appearance プロパティをサポートしています。

外観:normal|icon|window|button|menu|field;

予想どおり、これは確かにスタイルのカスタマイズに関連しています。しかし、説明では「ある要素を別の要素に変える」ということが抜粋されているだけで、チェックボックスの「√」を「×」に変える方法までは書かれていませんでした。
心配しないで、最初にこの属性を変更してみましょう:

単純かつ大雑把にスタイルを直接 none に設定して、効果を確認してください:

それは消えました! ！
待って、これはスタイルを (非人道的に) 完全にカスタマイズできるという意味ですか?たとえば、デフォルトの「√」を別の値に変更したいとします。
font-awesome は美しいフォント アイコンのセットで、そのアイコンをこのチェックボックスに入れたいと思います。

まず、font-awesome の CSS ファイルを紹介します。あまり言うことはありません。

次に、最初にこのチェック ボックスの「チェックされていない状態」のスタイルを設定します。

input[type=checkbox] {        display: inline-block;        height: 20px;        width: 20px;        border: 1px solid #000;        overflow: hidden;        vertical-align: middle;        text-align: center;        -webkit-appearance: none;        font: normal normal normal 14px/1 FontAwesome;        outline: 0;        background: 0 0;    }

上記のコードは、チェック ボックスのチェックされていない状態の幅、高さ、境界線の背景およびその他のスタイルを設定します。2 つあることに注意してください。ここで重要な点は、すでに説明した -webkit-Appearance です。これを none に設定する理由は、それを完全に消去するためです。つまり、自分で描画します。 2 番目は font: Normal Normal Normal 14px/1 FontAwesome で、このチェック ボックスのフォント属性を定義し、その後の font-awesome への参照の前提条件として機能します。
これで次のようになります:

次に、「selected」スタイルを定義します。これは、:before または :after 疑似要素を通じて実現できます。

-webkit-Appearance を使用して、中央の「√」を含むすべてのスタイルを消去しているため、擬似要素は非常に使いやすい方法です。

すごいです

ここでの内容: 「f00c」は font-awesome のアイコン フォント番号です。特定の検索については、公式 Web サイトにアクセスするか、次のような公式 Web サイトの例でコンソールを開いて表示することができます。

ここに移動 一歩、完了です。効果を確認しに来てください!

美しい！
この時点で、純粋な CSS3 を使用してデフォルトのチェックボックスをスタイル設定するすべてのタスクが完了しました。
他のボタンやラジオボックスも同様です~
時間に限りがあるため、当面はFirefoxとSafariブラウザでのテストは行っておりません。テストした学生がいたら、ぜひ下の階でコメントしてください。互換性が限られているため、このカスタマイズされたソリューションは参照として使用できますが、具体的な用途は状況に応じて異なります。

私の個人的なフロントエンド テクノロジー ブログのフォローを歓迎します: http://jrainlau.github.io/

読んでいただきありがとうございます。また次回お会いしましょう!