解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题

 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!important的方法也无法去除。

解决方法一: 取消设置input表单的autofocus属性

解决方法二:对于没有背景图片的元素,添加下面的代码:

input:-webkit-autofill {
-webkit-box-shadow: 0px 1000px white inset;
-webkit-text-fill-color: #;
}

解决方法三: 对于有背景图片的元素,将背景图片拿出来,置于<label></label>中,再对input表单进行设置。

值得注意的是:除了chrome默认定义的background-color,background-image,color不能用 !important 提升其优先级以外,其他的属性均可使用!important提升其优先级。

一般的浏览器input和button的高度不一致问题

当我们在一行中写出input(type="text")以及button以及select,我们可以发现,这几个的高度是不一致的, 主要问题是浏览器赋予的默认border不同而导致的。

解决方法: 将此三者的border设置为0即可发现设置同样的高度,它们就是一样高啦!!

input输入框在chrome下会有黄色的框,我们只需设置为 outline: 0 none; 即可。

解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题的更多相关文章

  1. input表单元素的默认padding不一致问题

    最近做的项目,发现一堆问题,input type=“text”和type=“button” (1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“t ...

  2. input type=password 浏览器会自动填充密码的问题

    解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...

  3. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  4. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  5. JS、jqueryie6浏览器下使用js无法提交表单的解决办法

    -----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...

  6. input type类型和input表单属性

    一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...

  7. H5 基本标签使用 浅析 (含video标签、input表单等)

    1. 音频标签<audio> <audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio ...

  8. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  9. 让input表单输入框不记录输入过信息的方法

    有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...

随机推荐

  1. 20160214 2016-2017-2 实验二《Java面向对象》实验报告

    实验二 面向对象程序设计 (一)单元测试 写一段关于分数标准的代码,如下: public class MyUtil{ public static String percentage2fivegrade ...

  2. 简单介绍Java的静态分派和动态分派

    最近复习JVM的知识,对于静态分派和动态分派的理解有点混乱,于是自己尝试写写代码,在分析中巩固知识. 有如下一段代码,请问每一段分别输出什么? package com.khlin.my.test; c ...

  3. linux mysql 权限

    原文地址:http://www.cnblogs.com/eczhou/archive/2012/07/12/2588187.html Linux下mysql新建账号及权限设置 1.权限赋予 说明:my ...

  4. WPF WebBrowser+TabControl MVVM模式 简单应用 提供源码下载

    源代码下载 这个程序是TabControl和Webbrowser的练手小程序 可达到练手目的有: MVVM设计模式的基本使用 Binding(包括相对源[RelativeSource]绑定)的基本使用 ...

  5. 爬虫开发7.scrapy框架简介和基础应用

    scrapy框架简介和基础应用阅读量: 1432 scrapy 今日概要 scrapy框架介绍 环境安装 基础使用 今日详情 一.什么是Scrapy? Scrapy是一个为了爬取网站数据,提取结构性数 ...

  6. OCP题库变更,052新加的考试题及答案整理-22题

    22.You are planning a software installation for both Oracle Database 11g Release 1 and Release 2. Yo ...

  7. [Flex] 组件Tree系列 —— 运用openItems获取打开节点

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:运用openItems获取打开节点 ...

  8. tcp 建立连接的三次握手,以及关闭连接的4次挥手

    TCP连接的三次握手 第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认; (客户端问服务器:你爱我吗?) 第二次握手:服务器收到syn包,必须确认客户的 ...

  9. 除了ROS, 机器人定位导航还有其他方案吗?

    利用ROS进行机器人开发,我想大多数企业是想借助ROS实现机器人的导航.定位与路径规划,它的出现大大降低了机器人领域的开发门槛,开发者无需向前人一样走众多弯路,掌握多种知识才能开始实现机器人设计的梦想 ...

  10. 逆向学习-DLL注入

    DLL注入技术,可以实现钩取API,改进程序,修复Bug. DLL注入指的是向运行中的其他进程强制插入特定的DLL文件. DLL注入命令进程自行调用LoadLibrary()API,加载用户指定的DL ...