css取消控件选中后出现的边框去除

最新推荐文章于 2022-11-03 12:10:03 发布

showkw

最新推荐文章于 2022-11-03 12:10:03 发布

阅读量792

点赞数 1

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/showkw/article/details/116239181

版权

Web前端专栏收录该内容

21 篇文章 3 订阅

订阅专栏

这篇博客探讨了如何使用CSS去除控件选中后的边框，例如input, button, select和textarea，通过设置outline为none实现。同时，文章也提到了CSS样式的优先级问题，特别是当一个类在前面被定义，导致后续更改该类样式无效时，可以使用!important来强制应用样式。

摘要由CSDN通过智能技术生成

css取消控件选中后出现的边框去除

input, button, select, textarea { outline:none; }

css样式最高优先级（因前面定义了该类元素的样式，导致在后面更改该类元素样式后无法更新样式）

div { background: red !important; }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

showkw

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS-设置或消除边框外围轮廓线

weixin_44486539的博客

10-16

1958

outline 用于设置元素边框外围的轮廓线，是一个综合性的属性，可以设置边框线的颜色、样式和粗细属性： outline-color 设置轮廓线的颜色；属性可以是颜色单词、十六进制颜色值、rgb 等 outline-style 轮廓线的样式；属性值可以是 solid、dashed、dotted 等 outline-width 轮廓线的粗细简写形式： outline: outline-co...

CSS学习笔记

YuKing_HONG的博客

10-17

1448

个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。

参与评论您还未登录，请先登录后发表或查看评论

cssz中<a>标签鼠标选中去除选中边框

weixin_30950887的博客

01-07

353

IE： <a href="#" hidefocus="true"></a> 非IE： a:focus { outline:none; } 参考： http://blog.csdn.net/mchange/article/details/8662799 转载于:https://www.cnblogs.com/EasonJim/...

＜select＞在选择后出现边框线的问题

I_Am__Tom的博客

11-19

1273

select { outline: none }

去除select选中时的边框以及文本居中

GongWei_的博客

09-27

2961

文本居中 select{ text-align: center; text-align-last: center; } 选中时的边框去除 select{ outline:none; }

原生 select 标签选择后的边框修改

前端技术

02-23

3295

左图是初始化边框样式，右图是选择后，自带了粗边框。太丑了....要去除，修改如下： select:focus-visible { /* outline: -webkit-focus-ring-color auto 1px; 这是谷歌浏览器的原生样式*/ outline: none; } ...

用css消除button/selcet等控件选中时的虚线框(让页面美观点)

09-25

为了消除button、select等控件的虚线边框，我们可以在CSS中设置`outline`为`none`。如下所示： ```css input, button, select, a { outline: 0 none !important; } ``` 这里`outline: 0 none`将`outline`的宽度设...

在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法

09-05

这种边框是 Chrome 为了帮助用户识别当前被选中的表单元素而设计的，但对于追求完美用户体验的开发者来说，它可能并不符合页面的样式设计。同时，`textarea` 的右下角默认提供了拖动调整大小的控件，这在某些场景下...

css基础

m0_72711350的博客

11-03

472

css

css 设置 checkbox复选框控件的对勾√样式

weixin_30432007的博客

04-17

2176

css 设置 checkbox复选框控件的对勾√样式最终的样式，想要的效果：我们要创建方框中的对勾，对于这一点，我们可以使用伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px * 15px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的属性让它旋转一下，这样看起来就像是一个对...

css样式中，对某元素点击时出现边框的问题-简单通用的解决方法

code^_^熊的博客

01-07

2359

前言当我们给button设置border-radius样式之后，鼠标点击时，被点击的button会出现边框线，这样给人的体验感很差，并且减少了一丝丝美感。解决方法: 在css中为button标签设置伪类 “:focus” button:focus{//这行button的位置可以用标签名button 或者对应元素的id、class值来代替

去掉chrome浏览器中input或textarea在得到焦点时出现黄色边框的方法

weixin_30315435的博客

07-10

463

chrome浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页浏览器，但是在开发中，让人感觉很多余的一个特性就是，在表单项中的控件聚焦时总会出现一个黄色边框特别是input[text]和textarea，并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能，如下图所示： input[text]：textarea：有的时候黄色边框很影响页面效果，并且texta...

input type=“text“ CSS取消点击选中显示黑框的效果

Lsiyi_的博客

07-11

2275

CSS取消点击显示选中框的效果

select、input、textarea，默认样式处理

sunluyi的博客

11-19

258

select、input、textarea，默认样式处理 /*select 下拉选择设置右对齐*/ select option { direction: rtl; } /*去除浏览器中 input button 等标签获得焦点时的带颜色边框*/ input, textarea{ outline:none; } /*去除textarea的默认小三角*/ textarea{ resize: none; } ...

去掉checkbox边框的方法

weixin_30782331的博客

07-24

1160

<input name="a" type="checkbox" style="position:absolute;clip: rect(6 15 15 6)" checked="checked"> 关键：style="position:absolute;clip: rect(6 15 15 6)" 解释：此属性定义了绝对(absolute)定位对象可视区域的尺寸。1.cl...

学习在html中使用css去掉select自带的边框和小三角

徊忆羽菲

09-29

2637

学习在html中使用css去掉select自带的边框和小三角

CSS去除＜input＞选中后的黑框

m0_52575541的博客

07-21

7182

CSS去除选中后的黑框

选中后显示边框，不取消一直显示