Heim >Web-Frontend >HTML-Tutorial >css自定义checkbox之<label><input>纠葛_html/css_WEB-ITnose
css自定义checkbox之<label><input>纠葛_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:411028Durchsuche
来CSDN的处女问呢：
故事起因于我要单纯地用css自定义一个checkbox的样式，然后我是这样做的：
<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插件写的。BUT导师说我的方法不行啊（摔！）
他说：id 滥用会导致日后id重名排查困难，让我用把包裹在
回复讨论(解决方案)
你再加个span不就行了
<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>
问题确实按此解决了，谢谢！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：请教关于CSS中padding内边距的问题_html/css_WEB-ITnoseNächster Artikel：去掉NSString中的HTML标签_html/css_WEB-ITnose