blocks|key|930358|text|使用普通的蓝色border、中等的border-radius和位置为0+0的蓝色box-shadow。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|930359|entityMap^0|7|6|H|D|Y|3|14|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>Use a normal blue <code>border</code>, a medium <code>border-radius</code>, and a blue <code>box-shadow</code> with position <code>0 0</code>.</p>


blocks|key|714476|text|SLaks一针见血，但是您可能希望检查一下CSS3中输入的变化。圆角和方框阴影都是CSS3的新功能，可以让你做你想做的事情。我个人最喜欢的CSS3/HTML5链接之一是http://diveintohtml5.ep.io/。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|714477|entityMap|0|LINK|mutability|MUTABLE|url|http://diveintohtml5.ep.io/^0|2C|R|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>SLaks hit the nail on the head but you might want to look over the changes for inputs in CSS3 in general.  Rounded corners and box-shadow are both new features in CSS3 and will let you do exactly what you're looking for.  One of my personal favorite links for CSS3/HTML5 is <a href="http://diveintohtml5.ep.io/" rel="nofollow">http://diveintohtml5.ep.io/</a> .</p>


blocks|key|714505|text|我结合了前面的两个答案(jsfiddle)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|714506|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;++
}​|code-block|syntax|javascript|714507|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TYetV/1/^0|C|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I combined two of the previous answers (<a href="http://jsfiddle.net/TYetV/1/" rel="nofollow">jsfiddle</a>).</p>

<pre class="lang-css prettyprint-override"><code>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;  
}​
</code></pre>


blocks|key|714617|text|修改后的版本与发光较少的版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|714618|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;++
}|code-block|syntax|javascript|714619|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Modified version with little less glowing version.</p>

<pre><code>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;  
}
</code></pre>


blocks|key|714554|text|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;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|714555|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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;
}
</code></pre>


blocks|key|714579|text|下面是Bootstrap使用的代码。颜色略有不同，但概念是相同的。这是在使用LESS编译CSS的情况下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|714580|//+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}");
++}
}|code-block|syntax|javascript|714581|如果您没有使用LESS，那么这里是编译后的版本：|714582|.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);
}|714583|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Below is the code that Bootstrap uses. Colors are bit different but the concept is same. This is if you are using LESS to compile CSS:</p>

<pre><code>// 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);
  &amp;:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}
</code></pre>

<p>If you are not using LESS then here's the compiled version:</p>

<pre><code>.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);
}
</code></pre>


blocks|key|714593|text|这将创建发光的输入域和文本区域：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|714594|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;
}|code-block|syntax|javascript|714595|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This will create glowing input fields and textareas:</p>

<pre><code>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;
}
</code></pre>


blocks|key|714627|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|714628|$('.form-fild+input,.form-fild+textarea').focus(function()+{
++++$(this).parent().addClass('open');
});

$('.form-fild+input,.form-fild+textarea').blur(function()+{
++++$(this).parent().removeClass('open');
});|code-block|syntax|javascript|714629|.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%25;
}
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;
}|714630|<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>|714631|714632|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.form-fild input,.form-fild textarea').focus(function() {
    $(this).parent().addClass('open');
});

$('.form-fild input,.form-fild textarea').blur(function() {
    $(this).parent().removeClass('open');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="container"&gt;
	&lt;div class="row"&gt;
    	&lt;form&gt;
        &lt;div class="form-fild"&gt;
            &lt;label&gt;Name :&lt;/label&gt;
            &lt;input type="text"&gt;
        &lt;/div&gt;
        &lt;div class="form-fild"&gt;
            &lt;label&gt;Email :&lt;/label&gt;
            &lt;input type="text"&gt;
        &lt;/div&gt;
        &lt;div class="form-fild"&gt;
            &lt;label&gt;Number :&lt;/label&gt;
            &lt;input type="text"&gt;
        &lt;/div&gt;
        &lt;div class="form-fild"&gt;
            &lt;label&gt;Message :&lt;/label&gt;
            &lt;textarea cols="10" rows="5"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|930481|text|你最好使用Twitter+Bootstrap，它里面包含了所有这些好东西。特别是here+is正是你想要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|930482|此外，您还可以使用this+website中为Twitter+Bootstrap构建的不同主题|930483|entityMap|0|LINK|mutability|MUTABLE|url|http://twitter.github.com/bootstrap/|1|http://getbootstrap.com/css/#forms|2|http://bootswatch.com/#gallery|3^0|5|H|0|14|7|1|0|9|C|2|N|H|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]|$A|13|B|14|1|15]]|C|$]]|$1|F|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]|R|$5|I|J|K|C|$L|M]]]]

<p>You better use <a href="http://twitter.github.com/bootstrap/" rel="nofollow">Twitter Bootstrap</a> which contains all of this nice stuff inside. Particularly <a href="http://getbootstrap.com/css/#forms" rel="nofollow">here is</a> exactly what you want. </p>

<p>In addition, you can use different themes built for <a href="http://twitter.github.com/bootstrap/" rel="nofollow">Twitter Bootstrap</a> from <a href="http://bootswatch.com/#gallery" rel="nofollow">this website</a></p>


<p>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.</p>

<p>Example/Picture of the Twitter border: </p>

<p><img src="https://i.stack.imgur.com/v33Wq.png" alt="enter image description here"></p>

<p>I also don't quite know how to create the rounded corners.</p>


CSS/HTML: Create a glowing border around an Input Field

HTML5

我想为我的表单创建一些像样的输入，我真的很想知道TWITTER是如何在它们的输入周围发光的边界的。示例/ Twitter边框的图片：​​我也不太知道如何创建圆角。

问CSS/HTML:在输入字段周围创建发光边框
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/HTML:在输入字段周围创建发光边框EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/HTML:在输入字段周围创建发光边框
EN