Html 激活时在文本框周围产生发光效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/996371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make glowing effect around the text box while active
提问by praveenjayapal
Make glowing effect around the text box while placing the cursor inside the textbox. For example : just place the cursor inside the search textbox in our stackoverflow.com.
将光标放在文本框内时，在文本框周围制作发光效果。例如：只需将光标放在我们的 stackoverflow.com 中的搜索文本框内。
Its because of css, but i dont know how to achieve it.. Please help me.
它是因为 css，但我不知道如何实现它.. 请帮助我。
采纳答案by Josef Pfleger
While the effect you observe on the stackoverflow search box is probably browser specific (e.g. Google Chrome) there is a way to achieve what you want using the CSS :focuspseudo class:
虽然您在 stackoverflow 搜索框上观察到的效果可能是特定于浏览器的（例如 Google Chrome），但有一种方法可以使用 CSS:focus伪类实现您想要的效果：
#foo:focus { border: 2px solid red; }<input id="foo" type="text"/>回答by beakr
Instead of outlines, the box-shadowproperty achieves a very smooth, nice effect of any text field:
代替轮廓，该box-shadow属性实现了任何文本字段的非常平滑、漂亮的效果：
field {
border-color: #dbdbdb;
}
field:focus { /* When you click on the field... */
border-color: #6EA2DE;
box-shadow: 0px 0px 10px #6EA2DE;
}
Here's a JSFiddle DemoI once made myself showing the above code with a transition fade effect.
这是一个JSFiddle Demo，我曾经让自己展示了上面带有过渡淡入淡出效果的代码。
回答by Tyler Rash
Outline property
大纲属性
http://www.w3schools.com/css/pr_outline.asp
http://www.w3schools.com/css/pr_outline.asp
If you want it to appear when clicking on a text box:
如果您希望它在单击文本框时出现：
input:focus { outline: /* whatever */ }
IE7 doesn't support the :focus selector, but you can use jQuery:
IE7 不支持 :focus 选择器，但您可以使用 jQuery：
$("input").focus(function () {
$(this).css('outline','yellow solid thin');
});
回答by SpliFF
Obviously outline isn't supported by IE7 and even if it was I doubt it would "glow". You need to do this with a custom background image or something. There's an example of doing that here:
显然 IE7 不支持大纲，即使我怀疑它会“发光”。您需要使用自定义背景图像或其他东西来执行此操作。这里有一个这样做的例子：
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html
BTW: You say "border color". A border is not an outline. You can just use:
顺便说一句：你说“边框颜色”。边框不是轮廓。你可以只使用：
<input onfocus="this.style.border='2px solid yellow'">
You can do it with the CSS :focus pseudo-class but chances are IE6/7 doesn't support it.
您可以使用 CSS :focus 伪类来实现，但 IE6/7 可能不支持它。
回答by mohit
Code-
代码-
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);
}
回答by ??????? ????
If you're using bootstrap you can use
如果您使用的是引导程序，则可以使用
class="form-control"
