Pure css with pictures instead of checkbox and radio, no js implementation

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