CSS / HTML：在输入字段周围创建一个发光的边框 [英] CSS/HTML: Create a glowing border around an Input Field

问题描述

我想为我的表单创建一些体面的输入，我真的想知道如何TWITTER他们发光的边框周围的输入。

示例/图片Twitter边框：

/ p>

我也不知道如何创建圆角。

解决方案

这里：

  .glowing-border {
 border：2px固体#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/

（要查看演示的代码，请从网址中删除show /）

I want to create some decent inputs for my form, and I would really like to know how TWITTER does their glowing border around their inputs.

Example/Picture of the Twitter border:

I also don't quite know how to create the rounded corners.

解决方案

Here you go:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

Live demo: http://jsfiddle.net/simevidas/CXUpm/1/show/

(to view the code for the demo, remove "show/" from the URL)

这篇关于CSS / HTML：在输入字段周围创建一个发光的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！