CSS / HTML：在input字段周围创build一个发光的边框
我想为我的表单创build一些体面的input，我真的很想知道TWITTER是如何围绕input发光的。
示例/ Twitter边框的图片：
我也不太了解如何创build圆angular。
干得好：
.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 /”）
怎么样这样的事情… 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 */ }
使用正常的蓝色border ，中等border-radius和位置0 0的蓝色box-shadow 。
SLak碰到了头部，但是您可能希望查看一般CSS3中的input变化。 圆angular和盒子阴影都是CSS3中的新function，可以让你做你正在寻找的东西。 我个人最喜欢的CSS3 / HTML5链接之一是http://diveintohtml5.ep.io/ 。
修改后的版本less一些发光版本。
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; }
我结合了以前的两个答案（ 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; }
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; }
以下是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); }
这将创build发光的input字段和textareas：
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; }
$('.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>
你最好使用包含所有这些好东西的Twitter Bootstrap 。 特别是这里正是你想要的。
另外，您可以使用本网站为Twitter Bootstrap创build的不同主题
