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

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

  <div class="box">

         <p>请选择你的爱好：<br>

             <input type="checkbox" name="" id="">篮球<br>

             <input type="checkbox" name="" id="">足球<br>

             <input type="checkbox" name="" id="">乒乓球<br>

             <input type="checkbox" name="" id="">铅球<br>

             <input type="checkbox" name="" id="">冲浪<br>

             <input type="checkbox" name="" id="">打猎<br>

         </p>

     </div>

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

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

<style>

        input {

            background: #ffffff;

        }

</style>

运行结果：毫无变化

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

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

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

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

 <!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>

         .box span {

             position: relative;

         }

         input {

             position: absolute;

             visibility: hidden;

         }

         input+label {

             display: inline-block;

             border: 1px solid #ccc;

             background: #fff;

             width: 12px;

             height: 12px;

             position: relative;

             border-radius: 2px;

         }

         input:checked+label:before {

             position: absolute;

             left: 4px;

             display: inline-block;

             content: '';

             height: 7px;

             width: 3px;

             border: 1px solid red;

             border-width: 0 2px 2px 0;

             transform: rotate(45deg);

         }

     </style>

 </head>

 <body>

     <div class="box">

         <p>请选择你的爱好：<br>

             <span class="checkes"><input type="checkbox" name="" id="xuan1"> <label for="xuan1" class="ss"></label>   篮球</span> <br>

             <span class="checkes"><input type="checkbox" name="" id="xuan2"> <label for="xuan2" class="ss"></label>   足球</span> <br>

             <span class="checkes"><input type="checkbox" name="" id="xuan3"> <label for="xuan3" class="ss"></label>  乒乓球</span> <br>

             <span class="checkes"><input type="checkbox" name="" id="xuan4"> <label for="xuan4" class="ss"></label>   铅球</span> <br>

             <span class="checkes"><input type="checkbox" name="" id="xuan5"> <label for="xuan5" class="ss"></label>  冲浪</span> <br>

             <span class="checkes"><input type="checkbox" name="" id="xuan6"> <label for="xuan6" class="ss"></label>   打猎</span> <br>

         </p>

     </div>

 </body>

 </html>

运行结果：

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

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

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

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

input 选择框改变背景小技巧的更多相关文章

  1. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

  2. input选择框样式修改与自定义

    html自带的选择框样式不好看,并且在ios设备上丑的罚款.所以一般都是自定义样式: 原理:将原来默认的input选择框隐藏,然后控制label的:before与:after,配合矢量图标或者图片来实 ...

  3. 文件input框选择图片实时显示小技巧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 用jquery来实现正反选选择框checkbox的小示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. chrome表单自动填充导致input文本框背景变成偏黄色问题解决

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧, 这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有 ...

  6. appium+python自动化98-非select弹出选择框定位解决

    前言 遇到问题:document.getElementsByClassName(...)[0] is undefined 选择框如果是select标签的,可以直接用select专用的方法去定位点击操作 ...

  7. 纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

    很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...

  8. css的一些小技巧。修改input样式

    在第一次正式写项目的时候,遇到了几个布局的小技巧.记录一下. 我们常常会遇到图片和文字对齐的一种样式.比如 这样的样式,我们写的时候有时候会出现不对齐的情况.我们有俩种方法 一种就是flex的布局,还 ...

  9. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

随机推荐

  1. python day27--常用模块 time,random,os，序列化

    一.time模块 %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数(0-23) %I ...

  2. 获取map集合中key、value

    获取Map集合类中key.value的两种方法 方法一:利用Set集合中的keySet()方法 Map<String,String> map = new HashMap<String ...

  3. WEB学习笔记1-综述

    WEB前端基本技术:HTML.CSS.JavaScript 概念: 从职责上讲,Web前端开发要涉及网站开发的方方面面,从前端UI到和后端的数据交互都属于前端开发的范畴.Web前端开发是兼具艺术气息和 ...

  4. 着色器语言 GLSL (opengl-shader-language)入门大全

    基本类型: 类型 说明 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating s ...

  5. 洛谷1101：单词方阵（DFS）

    题目描述 给一n×nn \times nn×n的字母方阵,内可能蕴含多个"yizhong"单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着888个方向的任一方向,同一单词摆放 ...

  6. 【自动化测试：笔记一】adb命令

    1.查看当前连接的设备数 adb devices 2.连接设备 adb connect <设备名> 3.安装卸载app adb install packagesname adb unins ...

  7. mac下pycharm快捷键

    [转载]https://www.cnblogs.com/leolichao/p/9329685.html Mac键盘符号和修饰键说明 ⌘ Command ⇧ Shift ⌥ Option ⌃ Cont ...

  8. java实验四《Android程序设计》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:张士洋 学号:20165308 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 15:25 实验序号:08 ...

  9. 理解java回调机制

    摘自:ImportNew 以前不理解什么叫回调,天天听人家说加一个回调方法啥的,心里想我草,什么叫回调方法啊?然后自己就在网上找啊找啊找,找了很多也不是很明白,现在知道了,所谓回调:就是A类中调用B类 ...

  10. 域名到站点的负载均衡技术一览（主要是探讨一台Nginx抵御大并发的解决方案）（转）https://www.cnblogs.com/EasonJim/p/7823410.html

    一.问题域 Nginx.LVS.Keepalived.F5.DNS轮询,往往讨论的是接入层的这样几个问题: 1)可用性:任何一台机器挂了,服务受不受影响 2)扩展性:能否通过增加机器,扩充系统的性能 ...