最近在项目中遇到一个问题，想要改变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. ceph压力测试结果总结

    万兆网速的ceph分布式存储单虚拟机下的带宽和iops测试结果: 带宽: 写:700-850MB 读:800-900MB iops: 写:15000-20000 读:45000-55000

  2. 实验楼 MySQL 基础课程 挑战：搭建一个简易的成绩管理系统的数据库

    传送门:https://www.shiyanlou.com/courses/running 介绍 现需要构建一个简易的成绩管理系统的数据库,来记录几门课程的学生成绩.数据库中有三张表分别用于记录学生信 ...

  3. c++ 网络库

    1.libevent 2.boost::asio 3.ace boost::asio以前看过,不过忘记了 学习,学习

  4. Unity用GUI绘制Debug/print窗口/控制台-打包后测试

    Unity游戏视窗控制台输出 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  5. UVa699

    这个建树的根选的很有意思,在中间作为树的根.所以二叉树建树的方法虽然一般是有两种数组的方法,一个是如果深度不太大的话,可以之间用2*k+1,2*k建树,如果很大的话,就挨着建树,弄一个结构体,有左右子 ...

  6. jquery中filter的用法

    一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) {       ...

  7. Yii2项目高级模版 三个模块在同一个目录下的重定向配置

    最近做项目用到的,非常好用. 修改 advanced/backend/config/main.PHP 文件如下: return [ 'homeUrl' => '/admin', 'compone ...

  8. 第四节《Git检出》

    使用过Git的朋友们都谁知道git reset可以达到重置效果,不知道的小伙伴们可以看下上一篇博客,重置命令的一个用途就是修改引用的游标指向,实际上在执行重置命令的时候没有使用任何参数对所要重置的分支 ...

  9. json序列化时定制支持datetime类型，和到中文让他保留中文形式

    json序列化时,可以处理的数据类型有哪些?如何定制支持datetime类型 自定义时间序列化转换器 import json from json import JSONEncoder from dat ...

  10. sqluldr2 学习心得

    前言 最近正在做一个项目,需要导出数据库中的表,单数数据库中有很多带有虚拟列的表,而且表中的数据非常的庞大,有些表中的数据上亿条,项目经理让我研究如何快速导出这些数据. 下面是我研究的一些经历: (1 ...