代码先锋网 代码片段及技术文章聚合

CSS 取消input输入框聚焦时的边框(border&outline)

技术标签: CSS  css  html  html5

输入框默认聚焦后会有一个边框样式
请添加图片描述
想去掉这个样式先了解下border和outline

border&outline

outline属性值可以设置宽度、样式、颜色,顺序无所谓,同border样式。
请添加图片描述
border 和 outline 都绘制于元素周围,它们的区别是 outline 不占据空间

注意:对于很多元素来说,如果没有设置样式,轮廓是不可见的。因为样式(style)的默认值是 none。但 input 元素是例外,其样式默认值由浏览器决定。

将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式

outline:none
outline:0
版权声明:本文为qq_39706777原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39706777/article/details/120495957

智能推荐

CSS-边框 | border

border CSS 属性是一次将所有人的 border 属性值的速记属性:border-width,border-style,和border-color。与所有速记属性一样,任何未指定的单个值都将设置为其相应的初始值。重要的是,border不能用于指定自定义值border-image,而是将其设置为其初始值,即none。 ​ 建议您在要将所有边框属性设置为相同值时使用bord...

CSS border(边框)

简写顺序:width-style-color eg:p{border:1px solid red;} 按简写顺序依次介绍每个属性特点: 一、border-width:medium(默认。中等):thin;thick;thick;length;inherit; 二、border-style:none(默认。无);hidden(与none相同,应用于表时除外,对于表用于解决边框冲突);dotted(点...

边框border(HTML、CSS)

边框border(HTML、CSS)...

css去掉原生input框的border属性

原生input框是自带border属性的,但有时候得去掉的话怎么办呢? 这个时候可以把border设置为none 如果也要去掉点击时的光标效果则设置 或者   直接添加以下代码即可:  ...

猜你喜欢

css更改input输入框 placeholder样式

更改input 默认placeholder用到如下伪元素,针对各种平台处理,用的时候直接拷贝进去,对样式做下修改即可:...

纯css实现输入框(input)显示清除按钮

实现效果:当输入框中有文字时,显示一旁删除的小叉 html部分: required :提交前必要填写的字段(判断输入框是否有内容) css部分(scss): :valid :css选择器,如果输入合法则进行的样式的选择 .s-input:valid + .clear-box :判断class为s-input的元素是否合法(required判断输入框是否有值),如果是就加上清除按钮的样式 注:上述代...