CSS针对chrome内核浏览器
来源:互联网 发布:ultra sigma软件 编辑:程序博客网 时间:2024/04/29 22:53
一、chrome内核浏览器表单自动填充导致input文本框背景变成偏黄色的问题解决:
1.问题
chrome表单自动填充后,input文本框的背景会变成偏黄色的。
2.原因
因为chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,然后对其赋予以下样式:
情景一:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景,如:
这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
(1)如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
(2)如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用js去实现,例如:
4.参照:http://www.jb51.net/css/99317.html
二、chrome内核浏览器获取焦点后导致input textarea出现边框的问题解决:
1.问题:
在表单项中的控件聚焦时总会出现一个黄色边框特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能。
2.解决方法:
CSS清除掉chrome浏览器的默认效果:
(1)取消表单项聚焦时产生的黄色边框:
1.问题
chrome表单自动填充后,input文本框的背景会变成偏黄色的。
2.原因
因为chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,然后对其赋予以下样式:
input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; }3.解决方法:
情景一:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景,如:
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; }补充:如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; height: 27px!important; line-height: 27px!important; border-radius: 0 4px 4px 0; }情景二:input文本框是使用图片背景的
这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
(1)如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
(2)如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用js去实现,例如:
$(function() { if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('ul input:not(input[type=submit])').each(function(){ var outHtml = this.outerHTML; $(this).append(outHtml); }); }); } });遍历的对象可能要根据你的需求去调整。如果你不想使用js,好吧,在form标签上直接关闭了表单的自动填充功能:autocomplete=”off”。
4.参照:http://www.jb51.net/css/99317.html
二、chrome内核浏览器获取焦点后导致input textarea出现边框的问题解决:
1.问题:
在表单项中的控件聚焦时总会出现一个黄色边框特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能。
2.解决方法:
CSS清除掉chrome浏览器的默认效果:
(1)取消表单项聚焦时产生的黄色边框:
input,button,select,textarea{outline:none}(2)取消textarea的拖动改变大小的功能:
textarea{resize:none}
0 0
- CSS针对chrome内核浏览器
- 针对不同浏览器内核css写法
- 针对谷歌浏览器Chrome的CSS hack
- 针对谷歌浏览器Chrome的CSS hack 转
- CSS 针对谷歌浏览器(Chrome) safari的webkit核心浏览器CSS hack
- 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
- 针对chrome的css hack
- CSS 针对谷歌或者360(Chrome) safari的webkit核心浏览器 兼容性处理
- Chrome 浏览器调试CSS
- 针对Google chrome写css hack
- 针对Google chrome写css hack
- chrome内核浏览器,排版错位
- WinForm嵌入Chrome内核浏览器
- 用css去除chrome、safari等webikt内核浏览器的默认样式
- [转]针对各种浏览器的CSS Hack
- [转]针对各种浏览器的CSS Hack
- 针对浏览器隐藏CSS之独孤九剑
- 针对不同浏览器的css样式
- Java面向对象之类
- CS,一,数据存储
- MAC常用java开发软件
- 基于Processing的人物移动演示:两点间匀速移动
- 【UNIX网络编程】第26章 线程总结
- CSS针对chrome内核浏览器
- webstorm入门1-主题和配色
- 初探 Openstack Neutron DVR(转)
- 黑马程序员-java基础-IO流中的字节流和字符流
- 华为机试练习2
- Background Fetch
- Spring boot 整合spring Data JPA+Spring Security+Thymeleaf框架(上)
- android ping、netstat、telnet
- Top10Servlet