最近在项目中遇到一个问题，想要改变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. 10--Python入门--异常处理

    在程序编写过程中,难免会有一些错误.python中有一些语句可以处理这些异常或者错误,使得程序能够运行,且识别到错误的位置 try..except函数,java中是try catch 在下面的例子中, ...

  2. C# 流水号生成器开发

    前言 本文将使用一个Nuget公开的组件技术来实现一个流水号生成器,提供了一些简单的API,来方便的实现一个通用的流水号. 在visual studio 中的NuGet管理器中可以下载安装,也可以直接 ...

  3. Java面试通关秘籍汇总集

    一.基础篇 1.1.Java基础 面向对象的特征:继承.封装和多态 final, finally, finalize 的区别 Exception.Error.运行时异常与一般异常有何异同 请写出5种常 ...

  4. gitlab修改默认端口

    部署gitlab的时候,一启动,发现80和8080端口已经被占用,无奈,只得先将监听80端口的nginx和监听8080端口的jenkins停止.这会儿有空,琢磨一下如何修改gitlab的默认端口. 修 ...

  5. 本文档教授大家在yii2.0里实现文件上传 首先我们来实现单文件上传

    第一步  首先建立一个关于上传的model层  如果你有已经建好的可以使用表单小部件的model层 也可以直接用这个.在这里我们新建一个新的model层 在model层新建文件  Upload.php ...

  6. paramiko模块(01-04节)、SSH

    1.  SSH(安全外壳协议) SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SS ...

  7. Java_IO异常处理方式_入门小笔记

    package IO; import java.io.FileWriter; import java.io.IOException; /** * IO异常处理方式 */ class FileWrite ...

  8. 为git服务器配置gitosis管理权限

    yum install python-setuptools git clone https://github.com/tv42/gitosis.git cd gitosis sudo python s ...

  9. Linux中“零拷贝”

    服务器响应一个http请求的步骤 把磁盘文件读入内核缓冲区 从内核缓冲区读到内存 处理(静态资源不需处理) 发送到网卡的内核缓冲区(发送缓存) 网卡发送数据 数据从第一步中的内核缓冲区到第四步的内核缓 ...

  10. JS 格式化日期时间

    方法一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1 ...