最近在项目中遇到一个问题，想要改变input选择框的背景，然而，令我没有想到的是，竟然无法直接改变背景的颜色

通常情况下：我们都可以通过改变元素的 background-color 的值来改变元素的背景，但是在input选择框上，它失效了，无法使用

1  
     
       2         
      
请选择你的爱好：
 3             篮球
 4             足球
 5             乒乓球
 6             铅球
 7             冲浪
 8             打猎
 9         
10     
     

运行结果：背景是灰色的，个人感觉不太喜欢

1.在input 上增加样式，设置背景属性为白色：

运行结果：毫无变化

 

我不知道为什么会无效，通常都是这样实现的呀

不知道归不知道，但是总是要解决的

 

找了一些资料，整理如下：

2. 既然 input 不能改变，那就找一个东西来替代它，当作用在这个替代的东西上时，就如同作用在input选择框中一样，下面就使用一个label 标签来替换它

1  2  3  4     
      5     
      6     
      7      8     37 38 39     
     
      40         
      
请选择你的爱好：
41                 篮球 
42                 足球 
43                乒乓球 
44                 铅球 
45                冲浪 
46                 打猎 
47         
48     
     
49 50 

运行结果：

 

这样，就可以完美的替代input 选择框了，而且背景可以随意改变，什么颜色否可以

 

那么：为什么要用 label 标签来替换 input，而不用其他标签呢？

我试了一下div,结果虽然可以有相同的样子，但是当点击的时候，却不会选中打钩，所以用其他标签来替代是有问题的

因为只有label标签有 for 属性，当这个for 属性会关联着 id与for属性值相同的选择框，所以，当点击label 标签时，相当于点击在了input选择框中，即能直接改变input的checked 属性，从而影响css 选择器，接着影响红钩的显示和影藏