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

Question

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

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

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

Answer 1

chrome默认情况下输入的轮廓样式。我必须为许多项目禁用该规则。

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

在这里看看如何做到这一点：

chrome developer tool info

Answer 2

可以通过CSS完成此操作。看看Twitter Bootstrap Forms以及他们是如何做到的。在任何输入字段内单击。

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

使用box-shadow和transition

的CSS3属性完成

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);
}

Answer 3

我所知道的最佳跨浏览器/跨平台是formalize。

如果您正在尝试弄清楚特定渲染的工作原理（例如在Safari Mac上），那么您将寻找用户代理css 。在现代浏览器中，整个渲染生命周期完全参数化，严重依赖于特定于供应商的前缀，并且可以使用检查工具使其可见，例如：在Chrome或FF + Firebug：

Answer 4

这是你的浏览器自动为你做的。这就是为什么你找不到它的样式表。

Answer 5

因为它是浏览器的效果而不是样式，所以您需要手动完成。请注意，请记住每个浏览器都采用不同的方式（我认为它也取决于客户端操作系统）。因此，如果您事先了解客户端环境（可能在封闭的网络中），那么您真的只能匹配它。

Answer 6

您知道它是由网络浏览器添加的，它取决于您使用的浏览器和操作系统，因此我们无法向您显示确切的代码。如何找到确切的样式可能并不困难，尝试输入字段上的'inspect element'选项，它可以显示浏览器的'计算样式'。如果您可以确切地说明您在哪个操作系统上使用哪个浏览器，我们可以为您提供帮助。