CSS实现任意元素不同浏览器中获取焦点时的边框或背景颜色

项目中发现火狐浏览器输入框获得鼠标焦点时外边框颜色没有变化，用户体验不好，不能很明显地告诉用户哪个输入框获得了鼠标焦点，查阅资料发现页面中浏览器会给输入框input、textarea的outline属性设置一个默认值，当输入框获得鼠标焦点时外边框会自动带上颜色，失去焦点时外边框颜色消失。但是不同浏览器outline属性的默认值不同，如果想要所有浏览器获取焦点时的outline颜色相同，需要在base.css样式文件中将所有输入框的outline属性设置为none值，来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框。
然后通过border来设置边框颜色，通过background设置背景颜色。
css代码如下：

input{outline:none;
}
input:focus {border:1px solid #00C1B3;background: #00C1B3;
}

而且如果输入框设置了border-radius的属性来改变边角的弧度，此时通过设置outline样式为输入框添加外边框，就导致了一个问题：当输入框设置了border颜色，同时border-radius为3px以上时，能明显的看到outline外边框并没有和border重合。

而通过设置border颜色，将border再设置border-shadow就能实现和outline相同的效果。

扩展：

网页中有些输入框，其实是一个div来实现的，但是div上无法使用:focus伪类。

因为并不是所有的元素都是focusable的，根据DOMLevel2HTML规范，focusable的DOM元素都会有一个原生的focus()方法，只有focusable的DOM元素才有focus事件，才能使用:focus伪类。

拥有原生的focus()方法的DOM元素包括几种：HTMLInputElement、HTMLSelectElement、HTMLTextAreaElement、HTMLAnchorElement和HTMLButtonElement、HTMLAreaElement。

虽然规范这么定义，但浏览器给任何一个HTMLElement都定义了focus()方法，但并不是任何一个HTMLElement都能获得焦点（获得焦点术语叫active，具体请参考：http://help.dottoro.com/ljqmdirr.php）。

一般来说，任何时刻HTML文档中只会有一个active元素，能成为active的元素包括：

表单元素(formc ontrollers)：input/option/textarea/button
链接元素(links)：a标签、area标签（必须要带href属性，包括href属性为空）
可以被编辑的元素（包括通过添加contenteditable="true"属性变成可编辑的情况）
设置了tabindex属性（tabindex值非-1）的元素
window：当页面窗口从隐藏变成前置可见时，focus事件就会触发

因此，要想将父元素div变成focusable，可以在元素上设置tabindex属性，然后通过:focus伪类设置div获得焦点时的border样式。

<div class="focus-test" tabindex="-1" contenteditable="true">自定义的输入框</div>

.focus-test{border: 2px solid #ccc;width: 100px;height: 100px;
}
.focus-test:focus{border: 2px solid #00E8D7;
}

注意：也可以通过JS来实现：给input/textarea绑定一个focus和一个blur事件，在focus事件处理函数中将div的边框置蓝，在blur事件处理函数中将div的边框恢复原样。

CSS实现任意元素不同浏览器中获取焦点时的边框或背景颜色相关推荐

vue使用Ant design的input输入框,去掉边框和获取焦点时的边框
vue使用Ant design的input输入框,去掉边框和获取焦点时的边框 /* 取消多行文本框伸缩效果 resize: none; */ /* 取消多行文本框边框 border: none ...
html自动切换body背景,html中怎么用body元素设置背景颜色
html中怎么用body元素设置背景颜色发布时间:2020-06-22 15:17:45 来源:亿速云阅读:137 作者:Leah 这篇文章运用简单易懂的例子给大家介绍html中怎么用body元素 ...
AE导出合成时，如何调整背景颜色？
AE导出合成时,如何调整背景颜色? AE导出来的视频,背景为黑色添加一个纯色图层按ctrl+Y再新建一个任意颜色的固态层放在后面透色 AE如何将图层置为底层? ctrl + shift + [ A ...
css 输密码键盘,搜狗浏览器中密码输入框那个虚拟机键盘的样式问题……
原标题:搜狗浏览器中密码输入框那个虚拟机键盘的样式问题-- 题图:搜狗浏览器的logo 在 CSS 重点出击群里,看到一位来自北京的朋友问了一个问题. (请原谅我无耻的没让你的名字出现) 当时我看到这 ...
避免css中文字体在浏览器中解析成乱码
许多童鞋在写CSS的时候,设置中文字体常常使用中文字符,例如font-family:"黑体",这样我们在浏览器中看到的是什么样子的呢 ? 如果不想自己写的界面在浏览器字体声明上有异 ...
Ant Design Vue - 去除 input 组件边框和获取焦点时的边框蓝阴影效果
前言默认情况下,组件是有默认边框与获取焦点时存在的阴影效果的. 解决方案在该页面的底部加入以下覆盖样式. .ant-input:focus {/* 去除获取焦点时的样式 */border: non ...
vue实现网页中滚动鼠标时改变导航栏背景颜色
1.HTML <div id="topBannerNav" :style="topBannerNavBg">导航栏部分 </div> 2 ...
查看CAD图纸时，如何改背景颜色呢？
CAD制图检查的时候,我们常常需要换掉图纸背景颜色,以便于查阅图纸时清晰方便,这时候该如何操作改背景颜色呢?我们先安装下载CAD看图软件到桌面启动运行. 1.点击CAD看图软件中菜单栏里的[文件-打 ...
Grid不可编辑时，设置行背景颜色
tr[data-uid=dataItem.uid] 可以定位Grid的某一行. //控制背景颜色 { hidden: true, template: function (dataItem) { var ...

CSS实现任意元素不同浏览器中获取焦点时的边框或背景颜色

CSS实现任意元素不同浏览器中获取焦点时的边框或背景颜色相关推荐

最新文章

热门文章