通过CSS禁止Chrome自动为输入框添加橘黄色边框

本文介绍如何使用CSS禁止Chrome浏览器为获得焦点的输入框自动添加橘黄色边框,包括完全移除边框及自定义边框样式的方法。

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

Chrome默认会为所有的输入框加上橘黄色的边框,虽然有时候可以使我们的网站看起来更友好,但对自定义的样式是有影响的。

例如做了一个圆角框的input输入框,如果没有对边框focus时的属性做任何休息,Chrome将默认加上一个正方形的边框,无视你将input的border设为none的命令。

为了避免麻烦我们可以禁止chrome为被激活的输入框添加边框,方法如下:

1. 禁止为所有被激活的输入框添加边框
*:focus { outline: none; }

2. 禁止为被激活的输入框添加边框,例如

.class1:focus{ outline:none }

3. 也可以自定义输入框被激活时的边框样式

.changeborder:focus { outline:Blue Solid 4px;}

作者: Sola

文章链接:http://www.solagirl.net/override-chromes-automatic-border-around-active-fields-using-css.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值