chrome中hack解决input:-webkit-autofill自定义样式

在使用chrome浏览器设计网页时,想将input背景改成透明,也就是

background-color:transparent;

可是效果并不如人意

hack方法:

input:-webkit-autofill,
        textarea:-webkit-autofill,
        select:-webkit-autofill{
            -webkit-box-shadow: 0 0 0 1000px transparent inset;
        }

1000px可以尽可能的小~~

参考:解决方案

时间: 2024-10-08 23:21:15

chrome中hack解决input:-webkit-autofill自定义样式的相关文章

input[type="radio"]自定义样式

input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3.绘制我们的样式. 首先,我们准备了一个简单的选中样式,看图: 下面我们看看怎么实现 1.label 我们都知道,label可以和input关联,达到点击label就触发input的效果. 既然这样,我们就要充分的利用它. <label for="cat" class="ra

jquery-fileupload IE8IE9无法上传图片的BUG及如何给input[type=file]自定义样式

先说IE9,点击上传后,浏览器会提示下载内容. 原因:IE9及以下上传文件的响应头的contentType 如果是json,浏览器会以为是文件下载. 处理方法:找后台GG,把contentType改为text/html. 再修改done方法,获得地址 done: function(e, data){ var result = data.result[0].body ? data.result[0].body.innerHTML : data.result; result = JSON.parse

去除chrome中input的黄底色

在chrome中,input框总是出现黄底色,使用!important;也不好使,很烦人,下面方法可以解决        input:-webkit-autofill {             -webkit-box-shadow: 0 0 0 1000px white inset;         }         input[type=text]:focus, input[type=password]:focus{             -webkit-box-shadow: 0 0 

ie、firefox、chrome中关于style=&quot;display:block&quot; 引发的页面布局错乱的解决办法

ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:block" 导致页面布局错乱 对table中tr 不显示时,添加style="display:none",ie.chrome.firefox等都没有问题.但是如果想要显示某个tr,就不能使用style="display:block"了,因为,在ie下,可以正常

frameset 在 Google Chrome 中无法隐藏左边栏解决方法!

使用Frameset 框架,发现在IE下, <frameset name="mainDefine" cols="200,10,*" frameborder="NO" border="0" framespacing="0" rows="*"> <frame name="LeftFrame" noresize scrolling="auto&q

自定义input[type=&quot;checkbox&quot;]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式. 很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用.当<label>元素与复选框关联之后,也可以起到触发开关的作用. 思路:

自定义input[type=&quot;file&quot;]的样式

input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当我们规定 input[type="file"] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了: “未选择任何文件”这一行并没有竖直居中. 似乎在 firefox 中好看一些,嗯,我比较喜欢用 firefox.但是这些浏览器中的表现不一致,我们必须做兼容处理. 思

自定义input[type=&quot;radio&quot;]的样式

对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: html: <form action=""> <div class="sex"> <div class="female"> <label for="female">女</label>

&#39;autocomplete=&quot;off&quot;&#39;在Chrome 中不起作用

加油_linda 'autocomplete="off"'在Chrome 中不起作用 我们在表单输入框中输入信息,提交表单后,当我们再次进入表单页面,双击输入框时,会出现之前提交的信息,这是因为浏览器一般会记录下输入框之前提交表单的信息.这就是这篇文章要讲的autocomplete. AutoComplete控件就是指用户在文本框输入前几个字母或是汉子的时候,该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提升给用户,供用户选择,提供方便. 输入框(input,text