chrome浏览器input和textarea黄色边框解决办法

chrome浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页浏览器,但是在开发中,让人感觉很多余的一个特性就是,在表单项中的控件聚焦时总会出现一个黄色边框
特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能,如下图所示:

input[text]:

textarea:

有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下:

取消表单项聚焦时产生的黄色边框:

代码如下:

input,button,select,textarea{outline:none}

取消textarea的拖动改变大小的功能:

代码如下:

textarea{resize:none}

合并之后:

代码如下:

input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;} 

时间: 2024-09-13 17:46:52

chrome浏览器input和textarea黄色边框解决办法的相关文章

chrome浏览器重置后书签不见的解决办法

  chrome浏览器重置后书签不见了怎么办 方法一:当你chrome浏览器重置后,可以根据云同步来找回来这些书签的. 1:登陆账号:在输入栏输入"chrome://settings","设置"--"登录",登陆到你自己之前的账号. chrome浏览器重置 chrome浏览器重置 2:随后点击"确定,同步所有内容"按钮, 3:如若日后想要断开同步,请点击设置页面中的"断开帐户连接"按钮.(这样可以保护好你的

chrome浏览器安装一直显示正在连网解决办法

  如果你安装chrome浏览器显示"正在连网...",是因为你下载的是chrome浏览器官方在线版本,需要通过海外的网络才能进行下载的.

Win7系统Chrome浏览器无法显示网页图片的解决方法

Win7系统打开Chrome浏览器浏览网页发现页面无法显示图片,出现这种情况该如何解决?下面小编为大家带来Win7系统Chrome浏览器无法显示网页图片的解决方法.一起去看看吧! 方法一: 1.清理缓存1.启动Chrome浏览器,然后单击浏览器右上角按钮,选择"工具"-"清除浏览数据": 2.在弹出的窗口中将"清除指定时间内的数据"选择"全部"并将下方的"清空缓存"勾选上,最后单击底部的"清除浏览

jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法_jquery

 如果版本是: 1.3.1 IE无法显示关闭按钮 如果版本是: 1.3.4 IE6无法显示关闭按钮 解决办法: Version: 1.3.1 打开fancybox.css 注释掉此行: .fancybox-ie #fancybox-close { background: transparent; filter: progid : DXImageTransform.Microsoft.AlphaImageLoader ( src = 'images/fancy_close.png', sizing

win10系统IE浏览器打开网页没声音的解决办法

win10系统IE浏览器打开网页没声音的解决办法 1.打开IE浏览器,点击"设置"按钮,点击"Internet 选项"; 2.在internet选项界面点击"高级"选卡,在"设置"框中勾选"在网页中播放声音"点击应用并点击确定即可.

去掉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{ou

chrome浏览器不支持onmouseleave事件的解决技巧_javascript技巧

之前一直没测试chrome ,今天事情不太多,就测试了一下,发现给div加的 onmouseleave事件在chrome 中不起效果: 后来发现解决办法用jquery的方式实现 例如 复制代码 代码如下: <div id='aaa' class='divfloat' " onmouseleave='$(this).slideUp();' style='background-color: White; width:553px; position: absolute;left:" +

Windows 7 Chrome无法从QQ正常启动的解决办法

安装了新版QQ之后,发现Chrome浏览器出现了异常.若从QQ面板点击启动Chrome,则无法打开任何网页.但如果是先从开始菜单启动,再通过QQ面板打开QQ空间之类的页面,是正常的.于是乎就发现原因是WIN7系统的HTTP默认程序设置的注册表有问题. 症状: 直接从QQ面板点击QQ空间.微博或者聊天中的网址,启动Chrome后无法显示任何网页(包括chrome的设置). 先手动启动Chrome能顺利显示网页,并且启动Chrome后再点击QQ面板的按钮,能正常显示对应的页面. 解决办法: WIN+

Wordpress网站浏览器顶部空白28px高度的解决办法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在使用wordpress建设网站及编写主题时,偶尔会发生网站顶部距浏览器有28px高度空白的情况,即便CSS中声明*{margin:0;}还是没有改变!用Chrome浏览器审查元素看是发生在整个html中,而不是html中的某个元素. 这个问题其实是因为wordpress的wp_head()函数默认添加了一段样式! < style ty