CSS/HTML：在输入字段周围创建发光边框
Posted
技术标签:
【中文标题】CSS/HTML：在输入字段周围创建发光边框【英文标题】：CSS/HTML: Create a glowing border around an Input Field 【发布时间】：2011-08-05 23:11:31 【问题描述】：我想为我的表单创建一些像样的输入，我真的很想知道 TWITTER 如何在输入周围制作发光边框。
Twitter 边框示例/图片：
我也不太清楚如何创建圆角。
【问题讨论】：
这里有一个教程，教你如何操作：CSS glow effects with box-shadow @Town 的链接似乎有问题：重定向循环。 【参考方案1】：使用普通蓝色border、中等蓝色border-radius和位置为0 0的蓝色box-shadow。
【讨论】：
【参考方案2】：SLaks 一针见血，但您可能想了解一下 CSS3 中输入的一般变化。圆角和盒子阴影都是 CSS3 中的新特性，可以让你做你想要的。我个人最喜欢的 CSS3/html5 链接之一是 http://diveintohtml5.ep.io/。
【讨论】：
【参考方案3】：这样的事情怎么样...http://jsfiddle.net/UnsungHero97/Qwpq4/1207/
CSS
input
border: 1px solid #4195fc; /* some kind of blue border */
/* other CSS styles */
/* round the corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* make it glow! */
-webkit-box-shadow: 0px 0px 4px #4195fc;
-moz-box-shadow: 0px 0px 4px #4195fc;
box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */
【讨论】：
这不是缓进缓出 那又怎样？接受的答案并不能缓入。最初的问题（和我的答案）是在 2011 年发布的，我很确定 Twitter 的发光边框也没有进出缓和。此外，这个问题并不关注缓入，而是如何使边框以圆角发光，我已经回答了。我认为你不应该仅仅因为没有缓进方式就对我投反对票【参考方案4】：给你：
.glowing-border
border: 2px solid #dadada;
border-radius: 7px;
.glowing-border:focus
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
现场演示： http://jsfiddle.net/simevidas/CXUpm/1/show/
（要查看演示代码，请从 URL 中删除“show/”）
label
display:block;
margin:20px;
width:420px;
overflow:auto;
font-family:sans-serif;
font-size:20px;
color:#444;
text-shadow:0 0 2px #ddd;
padding:20px 10px 10px 0;
input
float:right;
width:200px;
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
margin-top:-10px;
input:focus
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>【讨论】：
如何为发光设置动画？ @NSElvis 例如transition: box-shadow linear 1sjsfiddle.net/simevidas/6LyWe/1
非常好。一件事，如果您只想将其应用于文本输入字段，您需要限制选择器：input[type=text]:focus, input[type=password], input[type=textarea]。
@MichaelKennedy 在现实世界的应用程序中，这还不够。标准方法是类，例如.glowing-input … .
当然，我的意思是应用于可能不需要的单选按钮、提交按钮等。【参考方案5】：
我结合了之前的两个答案 (jsfiddle)。
input
/* round the corners */
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
input:focus
outline:none;
border: 1px solid #4195fc;
/* create a BIG glow */
box-shadow: 0px 0px 14px #4195fc;
-moz-box-shadow: 0px 0px 14px #4195fc;
-webkit-box-shadow: 0px 0px 14px #4195fc;
【讨论】：
【参考方案6】：你最好使用Twitter Bootstrap，它里面包含了所有这些好东西。特别是here is 正是您想要的。
此外，您可以使用为Twitter Bootstrap 和this website 构建的不同主题
【讨论】：
修复了引导表单的断开链接【参考方案7】：input[type="text"]
@include 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
@include box-shadow(0 0 5px rgba(81, 203, 238, 1));
-webkit-box-shadow: 0px 0px 5px #007eff;
-moz-box-shadow: 0px 0px 5px #007eff;
box-shadow: 0px 0px 5px #007eff;
【讨论】：
【参考方案8】：下面是 Bootstrap 使用的代码。颜色有点不同，但概念是一样的。这是如果您使用 LESS 编译 CSS：
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus)
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba");
如果你没有使用 LESS，那么这里是编译后的版本：
.form-control:focus
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
【讨论】：
【参考方案9】：这将创建发光的输入字段和文本区域：
textarea,textarea:focus,input,input:focus
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
border: 1px solid #c4c4c4;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
input:focus,textarea:focus
outline: none;
border: 1px solid #7bc1f7;
box-shadow: 0px 0px 8px #7bc1f7;
-moz-box-shadow: 0px 0px 8px #7bc1f7;
-webkit-box-shadow: 0px 0px 8px #7bc1f7;
【讨论】：
【参考方案10】：修改后的版本，发光的版本少了一点。
input
/* round the corners */
//background-color: transparent;
border: 1px solid;
height: 20px;
width: 160px;
color: #CCC;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
input:focus
outline:none;
border: 1px solid #4195fc;
/* create a BIG glow */
box-shadow: 0px 0px 5px #4195fc;
-moz-box-shadow: 0px 0px 5px #4195fc;
-webkit-box-shadow: 0px 0px 5px #4195fc;
【讨论】：
【参考方案11】：$('.form-fild input,.form-fild textarea').focus(function()
$(this).parent().addClass('open');
);
$('.form-fild input,.form-fild textarea').blur(function()
$(this).parent().removeClass('open');
);.open
color:red;
.form-fild
position: relative;
margin: 30px 0;
.form-fild label
position: absolute;
top: 5px;
left: 10px;
padding:5px;
.form-fild.open label
top: -25px;
left: 10px;
/*background: #ffffff;*/
.form-fild input[type="text"]
padding-left: 80px;
.form-fild textarea
padding-left: 80px;
.form-fild.open textarea,
.form-fild.open input[type="text"]
padding-left: 10px;
textarea,
input[type="text"]
padding: 10px;
width: 100%;
textarea,
input,
.form-fild.open label,
.form-fild label
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<form>
<div class="form-fild">
<label>Name :</label>
<input type="text">
</div>
<div class="form-fild">
<label>Email :</label>
<input type="text">
</div>
<div class="form-fild">
<label>Number :</label>
<input type="text">
</div>
<div class="form-fild">
<label>Message :</label>
<textarea cols="10" rows="5"></textarea>
</div>
</form>
</div>
</div>【讨论】：
以上是关于CSS/HTML：在输入字段周围创建发光边框的主要内容，如果未能解决你的问题，请参考以下文章