在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法


Posted in Javascript onMay 24, 2011

特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能,如下图所示:

input[text]:

在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法

textarea:

在chrome浏览器中,防止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;}
Javascript 相关文章推荐
通过JavaScript控制字体大小的代码
Oct 04 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
javascript中String类的subString()方法和slice()方法
May 24 #Javascript
js中关于String对象的replace使用详解
May 24 #Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 #Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 #Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 #Javascript
三级下拉菜单的js实现代码
May 23 #Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 #Javascript
You might like
php实现mysql同步的实现方法
2009/10/21 PHP
php身份证号码检查类实例
2015/06/18 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Javascript - HTML的request类
2006/07/15 Javascript
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
js检测iframe是否加载完成的方法
2015/11/26 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
出生医学证明样本
2014/01/17 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
村干部培训方案
2014/05/02 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
力克胡哲观后感
2015/06/10 职场文书
培训计划通知
2015/07/15 职场文书
运动会通讯稿200字
2015/07/20 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python