输入焦点外发光答案

【问题标题】：input focus outer glow输入焦点外发光
【发布时间】：2012-03-11 15:12:23
【问题描述】：

是否可以模拟 safari 和其他浏览器添加到输入字段的外发光？并尽可能避免使用 jquery？

这篇文章解释了如何删除它： http://www.altrugon.com/css/remove-safaris-input-focus-outer-glowquitar-el-border-azul-de-los-inputs-en-safari/

谢谢

【问题讨论】：

标签： jquery html css

【解决方案1】：

Check out the DEMO

这里box-shadow与:focuspsudo选择器结合使用。

CSS：

input:focus,textarea:focus,select:focus{
  border:1px solid #fafafa;
  -webkit-box-shadow:0 0 6px #007eff;
  -moz-box-shadow:0 0 5px #007eff;
  box-shadow:0 0 5px #007eff;
  outline: none;
}

【讨论】：

@user441365：您可以查看声称可以在 IE 中使用 box-shadow 的 CSS3Pie：css3pie.com。不过我没试过。
在看到这个答案之前，我从来没有真正需要这个功能。 +1 小费。
你应该添加outline: none
@roberkules：你说得对，我没有在 Chrome 中检查过 :) 现在更新了。

【解决方案2】：

如果您想完全模拟它在 webkit 浏览器上显示的效果，您可以使用 CSS3 Box shadow 和 :focus pseudo class，但请注意并非所有浏览器都支持 CSS3。

【讨论】：

【解决方案3】：

你可以用 css 做到这一点：

input:focus
{
    outline:#00FF00 solid thick;
}

这是html：

<input />
<br/>
<br/>
<input />

【讨论】：