CSS / HTML：在输入字段周围创建发光的边框

问题描述

|| 我想为表单创建一些体面的输入，而且我真的很想知道TWITTER如何在输入周围做发光的边框。 Twitter边框的示例/图片： 我也不太了解如何创建圆角。     

解决方法

干得好：

.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

和蓝色

box-shadow

（位置position5ѭ）。     ,SLaks触手可及，但您通常可能希望查看CSS3中输入的更改。圆角和矩形阴影都是CSS3中的新功能，它们将使您能够完全按照自己的意愿进行操作。我个人最喜欢的CSS3 / HTML5链接之一是http://diveintohtml5.ep.io/。     ,我结合了前面两个答案（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 {
    /* 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;  
}

    ,

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,.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.075),0 0 8px rgba(102,175,233,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0.6);
}

    ,这将创建发光的输入字段和文本区域：

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,.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构建的不同主题