checkbox選中之后怎么改變背景顏色

UI設(shè)計(jì)的，必須要這么做，點(diǎn)擊之后右邊的哪個(gè)小紅點(diǎn)，還有小紅圈怎么寫(xiě)？

回答

編輯回答

替身

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    .hide {
        display: none;
    }

    .square {
        background-color: #fff;
        border: 1px solid #bfbfbf;
        display: inline-block;
        height: 0.9em;
        padding: 2px;
        border-radius: 100%;
        margin-right: 5px;
        margin-top: -2px;
        vertical-align: middle;
        width: 0.9em;
        line-height: 1;
        box-sizing: content-box;
    }

    .hide:checked+.square:after {
        background-color: #ffd958;
        content: "";
        display: inline-block;
        height: 0.9em;
        width: 0.9em;
        vertical-align: top;
        border-radius: 100%;
    }
</style>

</head>

<body>

<label>
    <input class="hide" type="radio" name="sex" id="tbb">
    <span class="square"></span>
    <span>b</span>
</label>
<label>
    <input class="hide" type="radio" name="sex" id="tbg">
    <span class="square"></span>
    <span>g</span>
</label>

</body>

</html>

2018年9月15日 01:36

編輯回答

吢丕

一般組件是使用了背景圖片，你可以審查元素的時(shí)候看到，然后單獨(dú)加class，在class下面修改背景圖片

2017年7月17日 06:41

編輯回答

心上人

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


          }


       }





    }

簡(jiǎn)單寫(xiě)了一個(gè) ，可以做參考下。

2018年7月30日 04:24