在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
更新时间:2011年05月24日 23:51:20 作者:
chrome浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页浏览器,但是在开发中,让人感觉很多余的一个特性就是,在表单项中的控件聚焦时总会出现一个黄色边框
特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能,如下图所示:
input,button,select,textarea{outline:none}
取消textarea的拖动改变大小的功能:
textarea{resize:none}
合并之后:
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}
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;}
您可能感兴趣的文章:
- 让textarea自动调整大小的js代码
- javascript textarea光标定位方法(兼容IE和FF)
- 动态调整textarea中字体的大小代码
- 新浪微博字数统计 textarea字数统计实现代码
- Textarea与懒惰渲染实现代码
- 非主流的textarea自增长实现js代码
- js操作textarea方法集合封装(兼容IE,firefox)
- JavaScript 获取/设置光标位置,兼容Input&&TextArea
- js TextArea的选中区域处理
- js封装的textarea操作方法集合(兼容很好)
- javascript实现的textarea运行框效果代码 不用指定id批量指定
- JavaScript 监听textarea中按键事件
- javascript之textarea打字机效果提示代码推荐
- 用javascript获取textarea中的光标位置
- textarea支持图形编辑的实现方法
- 在textarea文本域中显示HTML代码的方法
- 关于textarea的直观换行的一些研究材料
- JS TextArea字符串长度限制代码集合
相关文章
javascript while语句和do while语句的区别分析
这篇文章通过实例代码较详细的给大家介绍了javascript while语句和do while语句的区别,感兴趣的朋友一起看看吧2007-12-12
js老生常谈之this,constructor ,prototype全面解析
下面小编就为大家带来一篇js老生常谈之this,constructor ,prototype。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-04-04
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
这篇文章主要介绍了Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04


最新评论