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实现任意元素不同浏览器中获取焦点时的边框或背景颜色

猜你喜欢