码迷,mamicode.com
首页 > 其他好文 > 详细

hack-checkbox

时间:2019-02-02 19:04:23      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:url   div   简单   display   no-repeat   大小设置   css   就是   pad   

checkbox选择按钮要用我们自己的样式,看到这个的时候,很可能会以为需要checkbox才能实现,用css可能很难。其实狠简单。
<style>
  .checkbox input{
    display: none;
  }
  .checkbox input + label {
    background: url(checkbox1.png) left center no-repeat;
    background-size: 20px 20px;
    padding-left: 20px;
  }
  .checkbox input:checked + label {
    background-image: url(checkbox2.png)
  }
</style>
<body>
  <div class="checkbox">
    <input type="checkbox" id="handsome">
    <label for="handsome">我很帅</label>
  </div>
</body>
首先没有选中的时候,设置一个背景,再设置一个padding,这样就可以显示出来,然后将背景的大小设置成跟padding一样大。选中的话,我们给了一个input:checked这样一个状态。这个状态是css提供的。然后使用了一个+。+号是后续的兄弟元素。也就是当checkbox选中的时候,label的样式就换个背景,这个选择器和+号就是点睛之笔。

 

同样的思路也可以用于radio.

hack-checkbox

标签:url   div   简单   display   no-repeat   大小设置   css   就是   pad   

原文地址:https://www.cnblogs.com/wzndkj/p/10348783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!