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

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. java学习笔记 --- 集合(续)

    1.map集合 1.1.特点:将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值. 1.2.Map集合和Collection集合的区别? Map集合存储元素是成对出现的,Map集 ...

  2. php flock 文件锁

    于php中文件锁函数flock函数用法简介,希望通过本文的介绍大家对于Linux方面能够更加的了解 flock (PHP 4, PHP 5) flock — 轻便的咨询文件锁定 说明 bool flo ...

  3. IOS常用代码整理

    常用代码整理: 12.判断邮箱格式是否正确的代码: //利用正则表达式验证 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRege ...

  4. Python: PS 图像调整--明度调整

    本文用 Python 实现 PS 图像调整中的明度调整: 我们知道,一般的非线性RGB亮度调整只是在原有R.G.B值基础上增加和减少一定量来实现的,而PS的明度调整原理还得从前面那个公式上去找.我们将 ...

  5. Remastersys---制作当前的ubuntu系统镜像iso,自定义ubuntu系统

    Remastersys---制作当前的ubuntu系统镜像iso,自定义ubuntu系统 Remastersys则款软件,我们就是使用他来将当前的系统制作成iso镜像,一方面可以用来备份系统,二来可以 ...

  6. Java快速排序和归并排序详解

    快速排序 概述 快速排序算法借鉴的是二叉树前序遍历的思想,最终对数组进行排序. 优点: 对于数据量比较大的数组排序,由于采用的具有二叉树二分的思想,故排序速度比较快 局限 只适用于顺序存储结构的数据排 ...

  7. 第三篇 makefile的伪目标

    我们来思考一下makefile中的目标究竟是什么?实际上,在默认情况下:    1.make将makefile的目标认为是一个文件:    2.make解释器比较目标文件和依赖文件的新旧关系,决定是否 ...

  8. tensorflow中的参数初始化方法

    1. 初始化为常量 tf中使用tf.constant_initializer(value)类生成一个初始值为常量value的tensor对象. constant_initializer类的构造函数定义 ...

  9. tensorflow中 tf.add_to_collection、 tf.get_collection 和 tf.add_n函数

    tf.add_to_collection(name, value)  用来把一个value放入名称是'name'的集合,组成一个列表; tf.get_collection(key, scope=Non ...

  10. 强化学习 reinforcement learning: An Introduction 第一章, tic-and-toc 代码示例 (结构重建版,注释版)

    强化学习入门最经典的数据估计就是那个大名鼎鼎的  reinforcement learning: An Introduction 了,  最近在看这本书,第一章中给出了一个例子用来说明什么是强化学习, ...