最近在项目中遇到一个问题，想要改变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. Java中==和equals的比较

    1.== (1)基本数据类型:比较值  基本类型有8种: 整数型:byte 字节类型:1个字节(8位) short 短整型:2个字节(16位) int  整数类型:4个字节(32位)   Java默认 ...

  2. es6学习日记3

    函数的扩展 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } ...

  3. layui选项卡-内容为echarts图显示不全的问题

    var width = $("威胁类型ID").width();var height = $("威胁类型ID").height(); $("#威胁来源 ...

  4. Idea基于maven搭建多模块单体结构项目

    菜鸟教程 一.创建一个公共的父工程: 1.1 创建一个新的maven项目: 1.2 先创建公共的父工程,选择maven骨架: 1.3 配置maven: 1.4 填写groupId.artifactId ...

  5. Centos6.8 编译安装Apache2.4

    cetos6.8源码安装apache2.4.29 apache官网:http://httpd.apache.org 具体安装步骤: 1 配置安装apache的基础环境2 下载想要安装的版本源码包3 解 ...

  6. vs2017 打开cs文件提示无法识别的GUID格式

    总结一句话 no zuo no die. 是我自己在注册表中给vs增加了自动以管理员身份运行,把值给错了,弄成了 ~ RUNASADMIN WIN7RTM, 改成 ~ RUNASADMIN 后OK.还 ...

  7. springboot解决跨域问题

    在启动类里加入corsFilter import org.springframework.boot.SpringApplication; import org.springframework.boot ...

  8. 好久没考虑过的 sql 注入

    很多年没考虑 sql 注入了,毕业以后 使用mybatis #{ 参数的 语法 },这个 语法已经 做了防止 sql 注入的处理 . 看到同事写的 ${ 参数 },突然 想到这个问题 . 下面聊聊 s ...

  9. py-day3-2 python 函数递归

    # 递归 def calc(n): print(n) if int(n/2) == 0: return n res = calc(int(n/2)) return res res = calc(10) ...

  10. centos查看系统版本信息

    1.查看版本文件名称 ll /etc/*centos* 2.显示系统版本号 cat /etc/centos-release