最近在項目中遇到一個問題，想要改變input選擇框的背景，然而，令我沒有想到的是，竟然無法直接改變背景的顏色
通常情況下：我們都可以通過改變元素的 background-color 的值來改變元素的背景，但是在input選擇框上，它失效了，無法使用
1 <div class="box"> 2 <p>請選擇你的愛好：<br> 3 <input type="checkbox" name="" id="">籃球<br> 4 <input type="checkbox" name="" id="">足球<br> 5 <input type="checkbox" name="" id="">乒乓球<br> 6 <input type="checkbox" name="" id="">鉛球<br> 7 <input type="checkbox" name="" id="">沖浪<br> 8 <input type="checkbox" name="" id="">打獵<br> 9 </p> 10 </div>
運行結果：背景是灰色的，個人感覺不太喜歡
1.在input 上增加樣式，設置背景屬性為白色：
<style> input { background: #ffffff; } </style>
運行結果：毫無變化
我不知道為什么會無效，通常都是這樣實現的呀
不知道歸不知道，但是總是要解決的
找了一些資料，整理如下：
2. 既然 input 不能改變，那就找一個東西來替代它，當作用在這個替代的東西上時，就如同作用在input選擇框中一樣，下面就使用一個label 標簽來替換它
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .box span { 10 position: relative; 11 } 12 input { 13 position: absolute; 14 visibility: hidden; 15 } 16 input+label { 17 display: inline-block; 18 border: 1px solid #ccc; 19 background: #fff; 20 width: 12px; 21 height: 12px; 22 position: relative; 23 border-radius: 2px; 24 } 25 input:checked+label:before { 26 position: absolute; 27 left: 4px; 28 display: inline-block; 29 content: ''; 30 height: 7px; 31 width: 3px; 32 border: 1px solid red; 33 border-width: 0 2px 2px 0; 34 transform: rotate(45deg); 35 } 36 </style> 37 </head> 38 <body> 39 <div class="box"> 40 <p>請選擇你的愛好：<br> 41 <span class="checkes"><input type="checkbox" name="" id="xuan1"> <label for="xuan1" class="ss"></label> 籃球</span> <br> 42 <span class="checkes"><input type="checkbox" name="" id="xuan2"> <label for="xuan2" class="ss"></label> 足球</span> <br> 43 <span class="checkes"><input type="checkbox" name="" id="xuan3"> <label for="xuan3" class="ss"></label> 乒乓球</span> <br> 44 <span class="checkes"><input type="checkbox" name="" id="xuan4"> <label for="xuan4" class="ss"></label> 鉛球</span> <br> 45 <span class="checkes"><input type="checkbox" name="" id="xuan5"> <label for="xuan5" class="ss"></label> 沖浪</span> <br> 46 <span class="checkes"><input type="checkbox" name="" id="xuan6"> <label for="xuan6" class="ss"></label> 打獵</span> <br> 47 </p> 48 </div> 49 </body> 50 </html>
運行結果：
這樣，就可以完美的替代input 選擇框了，而且背景可以隨意改變，什么顏色否可以
那么：為什么要用 label 標簽來替換 input，而不用其他標簽呢？
我試了一下div,結果雖然可以有相同的樣子，但是當點擊的時候，卻不會選中打鈎，所以用其他標簽來替代是有問題的
因為只有label標簽有 for 屬性，當這個for 屬性會關聯着 id與for屬性值相同的選擇框，所以，當點擊label 標簽時，相當於點擊在了input選擇框中，即能直接改變input的checked 屬性，從而影響css 選擇器，接着影響紅鈎的顯示和影藏