去掉Chrome,Safari等浏览器input,select,textarea等form元素的高亮效果

最新推荐文章于 2023-07-03 15:20:50 发布
最新推荐文章于 2023-07-03 15:20:50 发布
阅读量2.6k 收藏
点赞数
分类专栏： html
本文介绍了如何在Chrome和Safari等现代浏览器中去除input、textarea等表单元素的默认高亮样式，提供了简单的CSS解决方案，并解释了outline属性的相关概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

chrome、safari等现代浏览器，input,textarea,select等一些Form元素，会有一个默认的高亮样式。

chrome浏览器上的效果:


我们不需要这个默认样式的时候，要怎么处理呢，其实很简单，如下设置：

outline:none;

outline 定义和用法

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

outline-color
outline-style

outline-width

转载：http://www.cnf2e.com/css-div-html/chrome-safari-outline-none.html

Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
CSS结构性伪类、UI伪类与动态伪类全解析：从文档结构到交互状态的精准选择
读心悦
05-13 1416
结构性伪类选择器和UI伪类选择器是CSS中用于精准定位和样式控制的重要工具。结构性伪类选择器基于元素在HTML文档树中的位置或结构特征进行匹配，如:first-child、:nth-child()等，常用于实现响应式布局和复杂文档样式。UI伪类选择器则专注于表单元素或用户界面组件的状态，如:enabled、:checked等，用于动态反馈和交互效果。这些选择器无需依赖类名或ID，通过文档结构或元素状态即可实现精准控制，广泛应用于表格斑马纹、表单验证、焦点反馈等场景，提升用户体验和界面可用性。
取消谷歌 Chrome 文本框(域)外边框高亮和缩放功能的办法
jsbuzhidao的专栏
10-29 1766
浏览器一直以来挺喜欢用谷歌的Chrome，界面简洁，体积小，速度快。因为苹果Safari也是使用Webkit内核，因此他们有着类似的样式体现。 虽然有诸多优点，但也有好心办坏事的时候，比如对文本域、文本框的处理，首先对于文本域右下角会多出一个手动缩放尺寸的功能，然后会自动加上黄色的高亮边框显示，这种“人性化”处理，一般情况下是很不错的，但是对于前端开发来讲，有时候反而成了问题，比如你想精准控制文
chrome及Safari浏览器如何去掉文本输入框的高亮
精彩人生
01-20 1715
采用 Webkit 核心的浏览器主要有苹果的 Safari 和 Google 的 Chrome，Webkit 核心有着良好的性能，并且在某些细节对用户非常友好，页面输入框（input 标签）聚焦高亮和文本框（textarea 标签）缩放功能就是其中的两个对用户非常友好的设计。可是这两个设计在对用户友好的同时，却会对页面设计产生影响。 我们可以发现 Webkit 对输入框的高亮已经使页面呈现出
input button textarea 选中后蓝色高亮边框如何去掉
大白的博客
05-24 3192
解决办法： 可以设置样式 border: none; outline: none; 原因： 由于默认样式的控制，选中他们之后会有一个高亮的蓝色边框
屏蔽Chrome（webkit）中的input、textarea的默认点击/聚焦高亮的样式
weixin_34085658的博客
12-02 235
2019独角兽企业重金招聘Python工程师标准>>> ...
去除chrome输入框高亮
web dev life
04-15 447
chrome为input输入框添加了土黄色高亮样式,可以使用css修改：   :focus { outline: 0; }  
浏览器兼容性问题及解决方案大汇总
qq_51179053的博客
07-03 3501
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
基于正则表达式的JavaScript/C++语法高亮(js版)
Wind__Fantasy的专栏
10-26 3805
JavaScript的语法高亮一直是个难点，因为需要语义分析以确定/是除法操作的开始还是正则表达式的开始。目前关于高亮js的语法高亮都不是很理想，尤其是syntaxhighlighter(你待会看到的代码高亮效果就是它弄的, csdn说, 就用sh了)的效果算是最差的了，根本就不高亮正则、数字等，太不敬业了。假设你写的代码是足够规范的，而且不考虑效率的话，那么你使用我这个高亮js一般不会有问题。
如何让 fieldset 内的部分输入框在禁用状态下保持可用？
最新发布
07-13
- **性能与兼容性**：此方法在所有现代浏览器中有效（包括 Chrome、Firefox、Safari），且不依赖外部库。 - **引用参考**： - 引用[1]提到 `fieldset` 的 `disabled` 属性可统一禁用表单元素，但通过脚本覆盖可实现...
取消chrome输入框高亮的办法
weixin_30569001的博客
07-28 236
之前的做法是： input,select,textarea{outline:0;} 现在可以这么写： ：focus{outline:0} 转载于:https://www.cnblogs.com/momomo/archive/2011/07/28/2120478.html
input 标签屏蔽谷歌浏览器高亮显示
weixin_30311605的博客
12-03 152
只需要设置CSS样式：outline: none;就可以屏蔽谷歌浏览器的高亮显示。 转载于:https://www.cnblogs.com/zxgl/archive/2012/12/03/2799982.html
可输入的下拉框
weixin_30363981的博客
01-04 135
代码如下： HTML代码 <html> <head> <title>TW之运行代码插件--Ayin增强版</title> <style type="text/css"> div,span,p,td,font{font-size:9pt;} </style> </head> <body&...
取消点击搜索框或文本框高亮
weixin_44738158的博客
07-30 724
outline：none用于取消点击搜索框或者文本域表框会变粗高亮显示 resize: none 用于取消文本域textarea右下角可拉伸斜线
IDEA 或 IntelliJ 全家桶提示 Missing associated label 解决办法
热门推荐
潇洒郭的博客
05-21 1万+
警告复现 IDE 警告 Missing associated label <input type="text" name="xxx" value="xxx"> <textarea name="xxx" placeholder="xxx"></textarea> <select> 警告原因 Highlights form elements (input, textarea, and select) without required associated la
关于webstorm对input textarea 等表单元素提出的警告问题
make2008的专栏
10-15 7696
普普通通的表单元素，在webstorm里却无情的给出警告 Form input without an associated label less... (Ctrl+F1) This inspection highlights form elements without required associated label and provides the ability to create
关于 input在 chrome 、IE浏览器中遇到的兼容性问题处理
m0_49016709的博客
05-14 1554
input   CSS样式 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; background-color:transparent; background-im
html表单元素中轮廓,Chrome浏览器下点击表单outline轮廓处理方法
weixin_32173041的博客
06-28 763
我们之前对HTML5的，的小三角样式进行了自定义，但是还有一个不容忽视的体验问题，就是在Chrome浏览器下点击时候会出现outline轮廓，如下图所示：在实际项目开发的时候，产品和设计一定会让你把这个效果去掉的。以及，当我们元素点击较快的时候，文本会被选中，也不是我们想看到的。阻止文本选中解决办法：summary{-webkit-user-select:none;-moz-user-select...
WebStrom高亮警告(IntelliJ IDEA)
爱吃肉的熊猫君's Blog
10-28 3562
Form input without an associated label or title attribute less… (Ctrl+F1) 没有关联的标签或标题属性的表单输入…（Ctrl + F1）This inspection highlights form elements without required associated label (WCAG 2.0: H44) or ti
Bootstrap表单控件全解析：input、textarea等实例演示
<textarea rows="4" class="form-control" placeholder="多行文本输入"></textarea> ``` 这里设置了4行高度，用户可以输入多行文本。 3. 复选框 (Checkbox) Bootstrap中的复选框使用`<input type="checkbox">`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值