4

你知道输入字段周围的性感光芒吗？

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

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

4

6 回答 6

5

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

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

在此处查看如何执行此操作：

chrome 开发者工具信息

于 2012-06-20T02:36:48.753 回答
4

可以通过 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);
}
于 2012-06-20T02:42:21.653 回答
2

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

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

FF+萤火虫赢

于 2012-06-20T04:55:27.417 回答
0

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

于 2012-06-20T01:28:16.700 回答
0

因为它是浏览器的效果而不是样式，所以您需要手动完成。话虽如此，请记住每个浏览器的做法都不同（我认为这也取决于客户端操作系统）。因此，如果您事先知道客户端环境（可能在封闭网络中），您实际上只能匹配它。

于 2012-06-20T02:40:39.873 回答
0

您知道它是由网络浏览器添加的，它取决于您使用的浏览器和操作系统，因此我们无法向您显示确切的代码。如何找到确切的样式可能并不难，尝试输入字段上的“检查元素”选项，它可能会显示浏览器的“计算样式”。否则，如果您能准确说出您在什么操作系统上使用的浏览器，我们可以为您提供帮助。

于 2012-06-20T02:52:43.540 回答