去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

本文主要核心内容为:去掉chrome(谷歌)浏览器默认的input、textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小,感兴趣的朋友可以了解下

去掉chrome(谷歌)浏览器默认的input、textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小


1、使用Chrome的都知道,当鼠标焦点在input、textarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,outline这个属性。 
你可以用下面的css代码去掉所有元素的边框:

*:focus {outline: none;} 
用下面的代码去掉你要去掉的元素的边框:

.nohighlight:focus { outline:none; } 
你也可以给元素增加你希望的边框:

.changeborder:focus { outline:Blue Solid 4px; }

2、用chrome登录了一次并记录了COOKIES之后,再次打开,CHROME记录了上次输入的内容,背景图片就会被覆盖一层淡黄色的背景色, 点击一下鼠标,背景图片才显示出来。目前使用的方法是input设置属性

autocomplete="off"

3、chrome默认用户可以控制textarea的大小,在CSS中加入下面一句就可以了

textarea {resize:none;}

时间: 2024-11-02 23:35:42

去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景的相关文章

[CSS] Firefox required input textarea 粉红色边框去除方案 .

Firefox中,如果一个表单控件具有required属性,那么当这个控件失效时会自动被Firefox加上一圈粉红色的边框,极其难看,无法实现各 个浏览器统一,尤其是当你将这个控件设置了不显示某些边框线的时候,要去除Firefox给有required属性的表单控件添加的边框,只需要添加一句 CSS代码即可.添加下列代码以后,具有required属性的input和textarea将不再自动添加粉红色边框(其实是盒子阴影). <style> input[required]:invalid, inp

去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影

input, textarea, button, a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

去掉谷歌input记住账号或密码时默认出现的黄色背景

在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: 方法一:直接用css的内阴影来覆盖黄色,代码如下: input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } 方法二:input文本框使用图片背景 这个比较麻烦,目前还没找到完美的解决方法,有两种选择: 1.如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖

input textarea 获取焦点挡住输入法 解决办法

// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug // 相关 issue: https://github.com/weui/weui/issues/15 // 解决方法: // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题 // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-

去掉谷歌浏览器输入框默认的黄色背景

谷歌浏览器登录页记住密码后下次登录会自动填充,并且有黄色背景. 谷歌浏览器的设置如下: input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); background-image: none; color: rgb(0, 0, 0); } 去掉黄色背景第一种方法是对它重写样式,使用!important提升优先级,除了chrom

解决input获取焦点时底部菜单被顶上来问题

1 <div class="search-box"> 2 3 <input class="search-input" type="text" placeholder="请输入名称"> 4 </div> 5 <!--底部--> 6 <div id="mini_nav" class="nav bt-nav"> 7 <div&g

【前端JS】input textarea 默认文字,点击消失

如题,前端页面的 input textarea 有时候需要显示默认文字以提示用户,以下为实现代码,以 input 为例,textarea 可以直接搬用 HTML <input type="text" id="content" name="content" value="请输入内容"/> CSS <style type="text/css"> #content{color:#ccc;

去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>去除input的边框</title> 6 <style> 7 input{text-indent: 1em;} 8 #search1{ } 9 #search2{ border-width: 0; } 10 #search3{ border:1px solid re

Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

DOM的滚动 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动.这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用. 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐.-------目前各浏览器均支持 2.scrollIntoVie