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

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. 对HTML(HyperText Markup Language)的认识以及总结

    一.HTML的基础结构 以上图片可以看出HTML的基础结构: 文档声明+<html>根元素(也叫顶级元素)------><html>里包括<head>元素+& ...

  2. MyEclipse CI 2018.8.0正式发布(附下载)

    MyEclipse线上特惠,在线立享专属折扣!火热开启中>> MyEclipse 2018最终版日前正式发布,新版本通过构建Eclipse Photo.支持Java 10和Java EE ...

  3. docker中的安全机制

    有时候我们需要容器具有更多的权限,像如操作内核模块,控制swap交换分区,挂载usb磁盘,修改mac地址等.所以我们今天进行docker的安全设定. 一.使用docker命令设置docker的安全机制 ...

  4. Android Mms之:深入MMS支持

    Composing and editing MMS在Android Mms应用里面的具体实现形式,或数据结构是SlideshowModel,它是一个每个节点为SlideModel的ArrayList, ...

  5. liunx用户管理的基本命令

    1.passwd   修改用户密码 2.useradd 用户组名         增加用户组 3.su 用户名     切换用户名 4.usermod   用户更改 5.userdel    用户删除

  6. 代理模式及Spring AOP (一)

    一.代理模式 在不更改源码的前提下,加入新功能,通常需要用到代理设计模式. 代理设计模式分类: 静态代理 动态代理 jdk动态代理 cglib动态代理 其中spring AOP的底层用的是动态代理.其 ...

  7. js窗口拖动 模版

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. JPEG文件格式

    格式:JFIF(JPEG档的交换格式)压缩:JPEG(灰阶影像压缩比约为10:1:彩色影像约为20:1)以JPEG文件格式保存的图像实际上是2个不同格式的混合物:JPEG格式规范本身,用来定义图像的压 ...

  9. hdu2080-2081

    hdu2080 计算两点关于原点夹角,数学 #include<stdio.h> #include<math.h> double len(double x1,double y1, ...

  10. HDU6387 AraBellaC

    题意 AraBellaC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...