纯css用图片代替checkbox和radio,无js实现方法
html
<ul id="is_offical_post_links"> <li> <label> <input type="checkbox"> <i></i> <span>正在直播</span> </label> </li> <li> <label> <input type="checkbox"> <i></i> <span>即将直播</span> </label> </li> <li> <label> <input type="checkbox"> <i></i> <span>直播结束</span> </label> </li> </ul>
css
#is_offical_post_links li label{ cursor:pointer; position:relative; font-size: 18px; margin-right: 20px; color: #989898; } #is_offical_post_links li label input{ width: 14px; height:14px; opacity:0; filter:alpha(opacity=0); z-index: 5; position: relative; left: 0; top: 1px; cursor:pointer; } #is_offical_post_links li label i{ background:url(/images/live_source/uncheck.png) no-repeat; width: 14px; height: 14px; display: inline-block; z-index: 3; position: absolute; left: 0; top: 6px; } #is_offical_post_links li label input:checked + i{ background:url(/images/live_source/check.png) no-repeat; }
如若喜欢,欢迎转载,请在文章页面明显位置给出此文链接!
若您觉得这篇文章还不错请点击下右下角的推荐,有了您的支持才能激发作者更大的写作热情,非常感谢!