checkbox选中之后怎么改变背景颜色

Question

UI设计的，必须要这么做，点击之后右边的哪个小红点，还有小红圈怎么写？

Answer 1

.cconte div input[type='checkbox']{

    position: absolute;

    left:-0.2rem;

    top: .1rem;

    -webkit-appearance: none; 

    appearance:none;

    -moz-appearance:none; 

    display: block;

    width: .16rem;

    height: .16rem;

    border:1px solid #B5B5B5;

    outline: none;

    border-radius: 2px;

}

.cconte div input[type='checkbox']:checked{

    background: url(/crm/images/icon/866.png) no-repeat center /cover;

    border:none;

}

Answer 2

一般组件是使用了背景图片，你可以审查元素的时候看到，然后单独加class，在class下面修改背景图片

Answer 3

<span><div></div></span>&nbsp;<a href="#">男</a>

     &nbsp;<span><div></div></span>&nbsp;<a href="#">女</a>

        <script>

            

    window.onload = function(){

       

       var divs = document.getElementsByTagName("div"),

           spans = document.getElementsByTagName("span");

       

       for(var i = 0 ; i < divs.length ; i++){

          

          spans[i].index = i;

          

          spans[i].onclick = function(){

              

          

          divs[this.index].style.background = "red";

          }

       }

    }

简单写了一个 ，可以做参考下。