激活时在文本框周围制作发光效果答案

【问题标题】：Make glowing effect around the text box while active激活时在文本框周围制作发光效果
【发布时间】：2009-06-15 14:20:16
【问题描述】：

将光标放在文本框内时，在文本框周围制作发光效果。例如：只需将光标放在我们的 *.com 中的搜索文本框内。

这是因为css，但我不知道如何实现它..请帮助我。

【问题讨论】：

将光标放在搜索中 @* 不会产生您所描述的视觉效果。
我可能错了，但我认为我的 Mac OS X 上的所有浏览器对所有编辑框都这样做。这是系统行为。
我会使用动画 gif 并使用我的 css 来获取动画 gif 中的文本框。试试这个链接以获得关于 css 覆盖的教程：websiteoptimization.com/speed/tweak/overlay 当文本框获得和失去焦点时，您还需要使用 javascript 来隐藏或更改图像。
不，在使用谷歌浏览器时，它会显示金色边框
这不是问题，我只想在将光标放在文本框内时更改边框颜色。有没有可能

标签： html css xhtml

【解决方案1】：

box-shadow 属性代替轮廓，实现了任何文本字段的非常平滑、漂亮的效果：

field {
    border-color: #dbdbdb;
}

field:focus { /* When you click on the field... */
    border-color: #6EA2DE;
    box-shadow: 0px 0px 10px #6EA2DE;
}

这是一个JSFiddle Demo 我曾经让自己展示上面的带有过渡淡入淡出效果的代码。

【讨论】：

【解决方案2】：

虽然您在 * 搜索框上观察到的效果可能是特定于浏览器的（例如 Google Chrome），但有一种方法可以使用 CSS :focus 伪类来实现您想要的效果：

#foo:focus { border: 2px solid red; }

&lt;input id="foo" type="text"/&gt;

【讨论】：

这里的outline属性比设置边框更合适。
你说得对，outline属性在这里更合适。但是它在 IE 中不起作用，但 :focus 伪类也不起作用..

【解决方案3】：

大纲属性

http://www.w3schools.com/css/pr_outline.asp

如果您希望它在单击文本框时出现：

input:focus { outline: /* whatever */ }

IE7 不支持 :focus 选择器，但你可以使用 jQuery：

$("input").focus(function () {
     $(this).css('outline','yellow solid thin');
});

【讨论】：

是的，但同样需要，当光标在文本框内时，如果它出来了，它将充当普通文本框
您是说无论焦点是否在文本框上都需要大纲？您可以为此使用输入选择器（而不是 input:focus）。
IE7 不支持 :focus 选择器，我编辑了答案以包含 jQuery 解决方法。
IE7也不支持大纲

【解决方案4】：

显然 IE7 不支持轮廓，即使我怀疑它会“发光”。您需要使用自定义背景图像或其他东西来执行此操作。这里有一个例子：

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html

顺便说一句：您说的是“边框颜色”。边框不是轮廓。您可以使用：

<input onfocus="this.style.border='2px solid yellow'">

您可以使用 CSS :focus 伪类来做到这一点，但 IE6/7 可能不支持它。

【讨论】：

【解决方案5】：

代码-

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

演示-http://www.labshab.com/submit-guest-posts/

【讨论】：

【解决方案6】：

如果您使用的是引导程序，则可以使用

class="form-control"

【讨论】：