最近在项目中遇到一个问题，想要改变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. sqlx使用说明

    sqlx使用指南 参考链接: http://jmoiron.github.io/sqlx/ sqlx是一个go语言包,在内置database/sql包之上增加了很多扩展,简化数据库操作代码的书写 资源 ...

  2. Java通过URL 从web服务端获取数据

    1.Java 通过HttpURLConnection Post方式提交json,并从服务端返回json数据 package Demo.Test; import java.io.ByteArrayOut ...

  3. 获取Ueditor里面的图片列表，地址绝对化

    /**     * 内容中图片地址转成绝对地址     * @param $content     * @return mixed     */    private function imgUrl( ...

  4. 剑指Offer 8. 跳台阶 （递归）

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 题目地址 https://www.nowcoder.com/pract ...

  5. [Java] 資料輸入的差異性(System.in、BufferedReader、Scanner)

    一.System.in System.in提供的read方法每次只能讀取一個字節的數據,不實用 二.BufferedReader BufferedReader類位於java.io包中,使用要加上 im ...

  6. find查找文件的时间问题

    很多细节方面的东西没有到真正用的时候,是觉察不出来的,因为这个时间的问题出了问题,现在好好理一下,这个find的时间很容易就搞混了,一段时间不用,也忘了,也反映出来了自己的基础知识不是很牢固啊   f ...

  7. centos 7 su jenkins 切换不过去

    root切换到jenkins用户: passwd jenkins:设置jenkins用户密码 su jenkins : 切换不过去, 查看passwd文件 cat /etc/passwd 找到:jen ...

  8. docker镜像制作 centos6 nginx1.15.6 with NGINX_UPSYNC_MODULE

    首先我选择了在centos6里部署nginx的镜像,如果大家选择的是centos7,自己重新修改吧 这里的问题点有几个: 1,make的版本选择,因为我下载了最新的cmake,需要c++11编译 这玩 ...

  9. Python模块 os和sys

    os模块是与操作系统交互的一个接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相 ...

  10. makefile或shell中的一些变量

    总是记不住,作个笔记 $@ 所有目标文件 $< 第一个依赖文件的名称 $? 所有的依赖文件,以空格分开,这些依赖文件的修改日期比目标的创建日期晚 $^ 所有的依赖文件,以空格分开,不包含重复的依 ...