今日は、写真を使わずにチェックボックスを美しくする方法を共有します。以下は 3 つの異なる状態のレンダリングを見てみましょう:
1.HTML構造
注: ラベル label の for 属性値は、入力の ID 名として指定する必要があります。
2.CSSコード
1. 元の入力ラベルの透明度を 0 に設定します
2. 境界線が4pxを占めるため、label:afterの幅と高さは20pxに設定されます
3. チェックボックスの不定状態は、誰もが使用することはほとんどなく (レンダリングの 2 番目の状態)、js を通じてのみ設定できます。この状況は通常、ツリー構造で使用されます (つまり、子ノードは選択されていますが、状態は選択されていません)。すべて選択されたときの親ノードの)
コードの量は本当に少ないです。理解できない場合は、メッセージを残してください。ありがとうございます。:)