CSS美化チェックボックス

WBOY
リリース: 2016-09-27 14:05:20
オリジナル
1585 人が閲覧しました

今日は、写真を使わずにチェックボックスを美しくする方法を共有します。以下は 3 つの異なる状態のレンダリングを見てみましょう:

1.HTML構造

リーリー

注: ラベル label の for 属性値は、入力の ID 名として指定する必要があります。

2.CSSコード

リーリー

1. 元の入力ラベルの透明度を 0 に設定します

2. 境界線が4pxを占めるため、label:afterの幅と高さは20pxに設定されます

3. チェックボックスの不定状態は、誰もが使用することはほとんどなく (レンダリングの 2 番目の状態)、js を通じてのみ設定できます。この状況は通常、ツリー構造で使用されます (つまり、子ノードは選択されていますが、状態は選択されていません)。すべて選択されたときの親ノードの)

リーリー

コードの量は本当に少ないです。理解できない場合は、メッセージを残してください。ありがとうございます。:)

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート