How to style a checkbox using CSS

前端 未结 30 3448
日久生厌
日久生厌 2020-11-21 04:26

I am trying to style a checkbox using the following:

30条回答
  •  闹比i
    闹比i (楼主)
    2020-11-21 05:13

    No JavaScript or jQuery required.

    Change your checkbox style simple way.

    input[type="checkbox"] {
      display: none;
      border: none !important;
      box-shadow: none !important;
    }
    
    input[type="checkbox"] + label span {
      background: url(http://imgh.us/uncheck.png);
      width: 49px;
      height: 49px;
      display: inline-block;
      vertical-align: middle;
    }
    
    input[type="checkbox"]:checked + label span {
      background: url(http://imgh.us/check_2.png);
      width: 49px;
      height: 49px;
      vertical-align: middle;
    }
    
    

    Here is JsFiddle link

提交回复
热议问题