此文来源网络,我转载的原文里的图显示“该图片仅限百度用户内部交流使用”,我估计这篇文章是从百度空间抄过来的,该作者没保留原文地址。所以我在这里也没保留抄袭文章的地址。

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

(此图为自己截图)

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

取消表单项聚焦时产生的黄色边框:
input,button,select,textarea{outline:none}

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

textarea{resize:none}

最后把以上两个CSS合并后如下

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

 

去掉chrome浏览器中input或textarea在得到焦点时出现黄色边框的方法的更多相关文章

  1. 去掉chrome、safari input或textarea在得到焦点时出现黄色边框的方法

    1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...

  2. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  3. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  4. 取消chrome浏览器下input和textarea的默认样式

    最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...

  5. Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法

    今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...

  6. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  7. 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

    一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...

  8. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  9. 【F12】chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

随机推荐

  1. Pycharm下tensorflow导入错误

    问题: ImportError: libcublas.so.9.0: cannot open shared object file: No such file or directory 解决方案: L ...

  2. 按照Right-BICEP要求设计四则运算2程序的单元测试用例

    Right——结果是否正确? B——是否所有的边界条件都是正确的? I——能查一下反响关联吗? C——能用其它手段交叉检查一下吗? E——你是否可以强制错误条件发生? P——是否满足性能要求? 测试计 ...

  3. Android 引入外部模块编译选择

    /********************************************************************************* * Android 引入外部模块编 ...

  4. suggest parentheses around comparison in operand of &|

    error discription: .:: warning: suggest parentheses around comparison in operand of ‘&’ [-Wparen ...

  5. Future接口和FutureTask类【FutureTask实现了Runnable和Future接口】

    Future API: public interface Future<V> { /** * Attempts to cancel execution of this task. This ...

  6. JS new RegExp

    ★实例: var regex = new RegExp('k', 'g'); var v1 = 'akbdk'; v1.match(regex); //检索'k',返回数组(次数组中放的是 目标区域中 ...

  7. 定时器setTimeout()的传参方法

    更具体的代码:http://www.cnblogs.com/3body/p/5416830.html // 由于setTimeout()的延迟执行特性,所以在执行的函数中直接使用外部函数的变量是无法获 ...

  8. AGC014E Blue and Red Tree

    题意 There is a tree with \(N\) vertices numbered \(1\) through \(N\). The \(i\)-th of the \(N−1\) edg ...

  9. Maven的dependency scope属性

    官方地址:https://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.html#Dependen ...

  10. 关于事件委托的整理 ,另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...