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; }

?

轉載于:https://www.cnblogs.com/yuan9580/p/11343946.html

總結

以上是生活随笔為你收集整理的纯css用图片代替checkbox和radio,无js实现方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。