有没有办法找到输入文本字段发光的默认样式？

Question

你知道只要它具有焦点,围绕输入区域的性感发光？

在没有太多细节的情况下,我需要在输入字段之外重新创建该效果,但我似乎无法找到在任何地方指示这种效果的样式表.

(我知道怎么做,使用outline属性等等.我只是想知道是否有一种方法可以找到输入文本字段默认使用的EXACT值.)

Answer 1

chrome具有默认输入的轮廓样式.我必须为许多项目禁用该规则.

使用chrome开发人员工具查看浏览器样式规则.

看看这里怎么做:

chrome开发者工具信息

Answer 2

可以通过 CSS 来做到这一点。看看Twitter Bootstrap Forms以及它们是如何做到的。单击任意输入字段内部。

在这里查看一个简单的工作示例：http ://jsbin.com/esidas/2/edit#html,live

它是使用 CSS3 属性box-shadow和完成的transition

input[type=text] {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

input[type=text]:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}