checkbox实现

最新推荐文章于 2023-06-16 12:30:06 发布

Miya_Ye

最新推荐文章于 2023-06-16 12:30:06 发布

阅读量368

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/april_4/article/details/53348183

版权

CSS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

http://www.cnblogs.com/chaoyuehedy/p/5586735.html 一个很好的设计checkbox的，

之前我们按UX要求实现的，还是有差距，还要继续学习啊~~~

input[type="checkbox"]{
    -webkit-appearance: none;
    -moz-appearance:checkbox;
    vertical-align: middle;
    background-image: url("images/icon_select_disabled.png");
    background-size: 14px 14px;


    height: 14px;
    width: 14px;
    margin: 0 4px 0 0;

    outline: none;
  }

  input[type="checkbox"]:hover{
    -webkit-appearance: none;
    -moz-appearance:checkbox;
    vertical-align: middle;
    background-image:url("images/icon_select_normal.png");
    background-size: 14px 14px;

    height: 14px;
    width: 14px;
    margin: 0 4px 0 0;

    outline: none;
  }

  input[type="checkbox"]:checked {
    height: 14px;
    width: 14px;
    margin: 0 4px 0 0;

    outline: none;

    -webkit-appearance: none;
    -moz-appearance:checkbox;
    vertical-align: middle;
    background-image: url("images/icon_select_selected.png");
    background-size: 14px 14px;
  }