解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决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的高度不一致问题的更多相关文章
- input表单元素的默认padding不一致问题
最近做的项目,发现一堆问题,input type=“text”和type=“button” (1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“t ...
- input type=password 浏览器会自动填充密码的问题
解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...
- Chrome浏览器下自动填充的输入框背景
记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- input type类型和input表单属性
一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...
- H5 基本标签使用 浅析 (含video标签、input表单等)
1. 音频标签<audio> <audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- 让input表单输入框不记录输入过信息的方法
有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...
随机推荐
- pig配置
下载Apache Pig 首先,从以下网站下载最新版本的Apache Pig:https://pig.apache.org/ 步骤1 打开Apache Pig网站的主页.在News部分下,点击链接re ...
- [LeetCode 题解]:Candy
There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...
- Javascript中的闭包(转载)
前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...
- Jenkins安装笔记
自动化架构搭建过程中为实现当开发源码更新时自动化脚本同步触发自动执行,使用到持续集成工具Jenikins. Jenikins官网资料: 官方网站:http://jenkins-ci.org/ 插件下载 ...
- 「HNOI 2014」米特运输
题目链接 戳我 \(Describe\) 谁出的题目啊?这么长的题面,看完就滚粗了.强烈谴责 给一棵树,每个点有一个权值,要求修改一些权值,使: 一个点的权值必须是其所有儿子的权值之和 一个点的儿子权 ...
- CXF动态调用wsdl接口
1.application.properties文件中配置接口url 2.工具类 package com.vulnverify.core.utils; import java.io.IOExcepti ...
- CTSC2017酱油记
恩..又是一篇酱油记.. 自从SHTSC完之后都在复习地理高考..根本没有刷题.. 于是就来CTSC了..因为奇怪的实验考..APIO又不能参加..只能拿一块Fe了.. DAY0 恩..不存在DAY0 ...
- Windows 操作系统如何使程序开机自启
Windows 操作系统如何开机自启 一.前言: 作为一只运维开发,很多时候需要将自己的小工具做开机自启.在 Linux 的世界里,如果你希望一个程序可以开机自启,那么可以在/etc/rc.d/rc. ...
- 如何 3D 打印一个密码锁
简评:这篇文章介绍怎么用 3D 打印机做一个密码锁,巧妙地利用机械结构的变化实现锁的功能,相当有趣! 3D 打印机非常适合打印静态物体.如果你够聪明,还可以打印出功能物件.如果你特别特别聪明,那你能做 ...
- POJ3076 Sudoku
POJ3076 Sudoku 本题为16*16宫格 剪枝见代码 #include <cstdio> #include <iostream> #include <algor ...