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

Question

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:

enter image description here

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

Here's a tutorial that teaches you how: [CSS glow effects with box-shadow](http://blog.gesteves.com/post/475773360/css-glow-effects-with-box-shadow) — Town, Apr 14 '11 at 23:34

score 454 · Accepted Answer · edited Mar 04 '20 at 11:09

454

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)

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>

edited Mar 04 '20 at 11:09

Legends

21,202
16
97
123

answered Apr 14 '11 at 23:49

Šime Vidas

182,163
62
281
385

4

How I can animate the glow? – 3lvis Feb 07 '13 at 04:11
19

@NSElvis e.g. `transition: box-shadow linear 1s` http://jsfiddle.net/simevidas/6LyWe/1/ – Šime Vidas Feb 07 '13 at 12:05
Very nice. One thing, if you only want this applied to text input fields, you'll want to restrict the selector: input[type=text]:focus, input[type=password], input[type=textarea]. – Michael Kennedy Apr 12 '13 at 14:49
1

@MichaelKennedy In real world applications, that wouldn't be enough. The standard approach would be classes, e.g. `.glowing-input { … }`. – Šime Vidas Apr 12 '13 at 16:05
Sure, my point was that was applying to radio buttons, submit buttons, etc. that might not be wanted. – Michael Kennedy Apr 13 '13 at 18:03
@MichaelKennedy Ah yes, I see. Just `input { … }` is indeed bad code. I've changed it to a class. – Šime Vidas Apr 13 '13 at 19:41
I get a warning for box-shadow that it's not compatible with IE8. Is there an alternative for IE8? – Azimuth Jun 10 '16 at 13:40

Hristo · Answer 2 · 2013-05-23T04:55:28.973

33

How about something like this... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

enter image description here

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 */

}

edited May 23 '13 at 04:55

answered Apr 14 '11 at 23:37

Hristo

45,559
65
163
230

1

This is not easing in and out – rubo77 Apr 30 '14 at 14:33
1

so what? the accepted answer doesn't do ease-in-out. the original question (and my answer) was posted in 2011, and I'm pretty sure Twitter's glowing borders weren't easing in and out either. further, the question doesn't focus on the ease-in-out, rather on how to make the border glow with rounded corners, which I've answered. I don't think you should be downvoting me just because there's no ease-in-out – Hristo Apr 30 '14 at 15:15

score 7 · Answer 3 · answered Apr 14 '11 at 23:33

7

Use a normal blue border, a medium border-radius, and a blue box-shadow with position 0 0.

answered Apr 14 '11 at 23:33

SLaks

868,454
176
1,908
1,964

score 4 · Answer 4 · answered Aug 31 '14 at 01:53

Modified version with little less glowing version.

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;  
}

score 4 · Answer 5 · edited Oct 07 '11 at 16:44

4

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 http://diveintohtml5.ep.io/ .

edited Oct 07 '11 at 16:44

DanBeale

310
4
15

answered Apr 14 '11 at 23:35

DaOgre

2,080
16
25

score 3 · Answer 6 · edited Jul 21 '12 at 19:10

I combined two of the previous answers (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;  
}

score 0 · Answer 7 · answered May 25 '13 at 10:51

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;
}

score 0 · Answer 8 · answered Jan 12 '14 at 08:55

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:

// 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}");
  }
}

If you are not using LESS then here's the compiled version:

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

score 0 · Answer 9 · answered Apr 30 '14 at 14:35

This will create glowing input fields and 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;
}

Dhaval Patel · Answer 10 · 2017-07-04T10:13:13.020

$('.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>

score -4 · Answer 11 · edited Dec 27 '13 at 02:15

-4

You better use Twitter Bootstrap which contains all of this nice stuff inside. Particularly here is exactly what you want.

In addition, you can use different themes built for Twitter Bootstrap from this website

edited Dec 27 '13 at 02:15

raffian

31,267
26
103
174

answered Oct 15 '12 at 15:55

Tural Ali

22,202
18
80
129

fixed broken link to bootstrap forms – raffian Dec 27 '13 at 02:15

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

11 Answers11

Linked

Related