纯css用图片代替checkbox和radio,无js实现方法

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

#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:;

    filter:alpha(opacity=0);

    z-index:;

    position: relative;

    left:;

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

    position: absolute;

    left:;

    top: 6px;

}

#is_offical_post_links li label input:checked + i{

    background:url(/images/live_source/check.png) no-repeat;

}