ホームページ > 記事 > ウェブフロントエンド > CSS カスタム チェックボックス
CSS カスタム チェックボックス
- WBOYオリジナル
- 2016-06-24 11:41:41997ブラウズ
CSDN に来る処女の質問:
この話は、CSS を使用してチェックボックスのスタイルを単純にカスタマイズしたかったために始まりました。そして、次のことを行いました:
<input id = "my-checkbox" type = "checkbox"/><label for = "my-checkbox"></label>
input[type="checkbox"]{opacity:0;}input[type="checkbox"] + label:before{background:#d5d5d5; content:""; height: 15px; width: 15px; position: absolute; top: 0; left: 0; } iCheck プラグインを真似て上記のメソッドを書きました。しかし、インストラクターは、私のやり方が良くないと言いました (落ちた!)
彼は、ID の悪用により、将来重複 ID をチェックすることが困難になるため、d5fd7aea971a85678ba271703566ebfd を 2e1cf0710519d5598b1f0f14c36ba674 で囲むように求めました。
私は突然、それが意味があると感じました
。 。 。 。 。 。 。
後で、単に CSS を使用して入力スタイルを実装することはできないことがわかりました (もちろん、js は解決するのが簡単です)。ラベルは [:checked] 疑似クラスからどこから来ているのでしょうか?
この問題の解決を手伝ってくれる専門家はいますか?
ディスカッションに返信 (解決策)
別のスパンを追加できますか?
<style type="text/css">input[type="checkbox"]{opacity:0;}input[type="checkbox"] + span:before{background:#d5d5d5; content:" "; }input[type="checkbox"]:checked + span:before{background:#ff0000; }</style></head><body><label><input type="checkbox"/><span></span>xxxxxxxxxxxxxxxxxxx</label>
これに従って問題は確かに解決されました、ありがとう!
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。