实现"输入框"获得焦点时外边框变蓝

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

.dianji:{
        border: 1px solid transparent;
}
.dianji:focus{
  	border: 1px solid #58a6e7;
  	outline: 0;
}

哪些元素是 focusable的？

搜索结果：

根据 DOM Level 2 HTML规范，focusable 的DOM元素都会有一个原生的focus()方法，只有 focusable 的DOM 元素才有 focus 事件，才能使用:focus伪类。拥有原生的focus()方法的DOM元素包括几种：HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement。很明显，规范中遗漏了HTMLButtonElement and HTMLAreaElement。

虽然规范这么定义，但浏览器在实现时却是另外一套。浏览器给任何一个 HTMLElement 都定义focus()方法，但并不是任何一个HTMLElement 都能获得焦点（获得焦点术语叫 active, 具体请参考：http://help.dottoro.com/ljqmdirr.php）。一般来说，任何一个时刻HTML 文档中只会有一个active元素，但并不是任何一个元素都能成为active元素。能成为active 的元素包括：

1. 表单元素(form controllers)：input/option/textarea/button

2. 链接元素(links)：a标签、area标签（必须要带 href 属性，包括 href 属性为空）

3. 可以被编辑的元素（包括通过添加 contenteditable = "true"属性变成可编辑的情况）

4. 设置了 tabindex 属性（tabindex 值非-1）的元素

5. window：当页面窗口从隐藏变成前置可见时，focus 事件就会触发

查看原文