去掉webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

使用Webkit核心的浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页引擎,但是在开发中,让人感觉很多余的一个特性就是,在表单项中的控件聚焦时总会出现一个黄色边框(360急速模式是webkit的内核,兼容模式是ie的内核及Trident的内核),特别是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;}

时间: 2024-07-31 13:41:14

去掉webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框的相关文章

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

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

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

chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首先介绍Chrome开发者工具中,调试时使用最多的三个功能页面是:元素(ELements).控制台(Console).源代码(Sources),此外还有网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.CSS属性.监听事件.断点等. 控制台(Console):控制

【js】IE、FF、Chrome浏览器中的JS差异介绍

如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff 的getBoxObjectFor  opera 的window.opera  safari 的openDatabase  Chrome 的MessageEvent有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧 2

父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点B使用了position:fixed进行了定位,按照常理节点B应该悬挂在浏览器窗口视图上,不会跟随滚动条而滚动的,但是这个效果在Chrome浏览器下面是无效的,经过测试在IE11.Firefox.safari中均没有问题,在Opera中出现的效果和Chrome中完全一样. 总结一下:在Chrome和

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效(css)

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效css3 transition 属性是一个简写属性,用于设置四个过渡属性 CSS 属性的名称 all完成过渡效果需要多少秒或毫秒 0.30s速度效果的速度曲线 :ease-in-out定义过渡效果何时开始: css3 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; 0 0 5px rgba(81, 203, 2

无法在Chrome浏览器中查看SCCM SSRS报告

小编一直热衷于在Chrome浏览器,总感觉Chrome浏览器都比其他浏览器好使,最近在玩SCCM的报表,于是就使用该浏览器访问SCCM报告.但是当我访问报告时,报告根本没有显示出来.我无法在Chrome浏览器中查看SCCM SSRS报告.SSRS代表SQL Server报告服务.这里记录更多有关SSRS的信息.尽管这是Chrome浏览器的问题,但是Firefox和Internet Explorer中的报告都很好.   Configuration Manager中的报告提供了一组工具和资源.这些帮

渗透技巧——导出Chrome浏览器中保存的密码

0x00 前言 在后渗透阶段,获得权限后需要搜集目标系统的信息.信息越全面,越有助于进一步的渗透.对于Windows系统,用户浏览器往往包含有价值的信息. 在之前的文章<本地密码查看工具LaZagne中的自定义脚本开发>曾介绍过利用LaZagne导出多个浏览器密码的方法. 本文将要针对Chrome浏览器,介绍具体的导出原理和利用方法,解决一个实际问题: 如何导出另一系统下Chrome浏览器中保存的密码? 0x01 简介 本文将要介绍以下内容: ·Chrome浏览器保存密码的方式 ·如何导出Ch

nginx配置让任何文件在浏览器中显示文本text/plain

例子 server { listen 81; root /var/www/applog; autoindex on; autoindex_exact_size off; autoindex_localtime on; location / { } location ~ .*/188.188.1.*/.*\.log$ { add_header Content-Type text/plain; } } 查看博文:nginx配置让任何文件在浏览器中显示文本text/plain 原文地址:http://

Jmeter在chrome浏览器中录制脚本

利用blazemeter插件可以录制chrome浏览器中的操作,并生成jmx文件,导入到jmeter中使用 1.  下载blazemeter 地址:https://pan.baidu.com/s/1VRVv4ZQ9B2U_y2p22NNqhA 2.  安装插件 将文件拖到 chrome->更多工具->扩展程序 中 插件会自动安装 安装完后,Chrome浏览器右上角有一个BZ的图标 3.注册并登录blazemeter 打开blazemeter后,需要登录,方可将录制后的脚本转换为jmx文件: 登