使用純css給radio類型框添加樣式


  我們知道input的radio復選框是不能設置樣式的,但由於項目的需要,可能我們需要給標簽添加更多的樣式,以滿足需求,下面我就給大家寫一下我所用的方法。

  首先我們可以通過一個span標簽或其他標簽來設置樣式,然后動態的選擇樣式可以使用“~”或“+”符號來表示兄弟級之間選擇器的變化,然后通過Input的checked狀態下改變span的樣式,代碼如下:

Radio樣式:.frozen-way label input[type="radio"]:checked ~ .border-radio {
    border-color: #1A76AA;
}
.frozen-way label input[type="radio"]:checked ~ .border-radio .y-radio {
    display: block;
}

  這樣就實現了原生復選框的樣式了,是不是很簡單?!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM