CSS/HTML: Create a Glowing Border Around an Input Field

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

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>

glow around div with border and color

Here is the complete code to style a div exactly like the twitter login input. The styles for the blue border are the box-shadow and border styles for the selector div[contenteditable]:focus. Live demo here (click).

Markup:

<div contenteditable="true">Username or email</div>

CSS:

div[contenteditable]:focus {
  border: 1px solid rgb(86, 180, 239);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}

div[contenteditable] {
  width: 97%;
  max-width: 280px;
  margin-right: 10px;

  font-family: Arial,sans-serif;

  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);

  display: inline-block;
  padding: 4px;
  margin: 0;
  outline: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;

  font-size: 13px;
  line-height: 20px;
}

Make glowing effect around the text box while active

While the effect you observe on the stackoverflow search box is probably browser specific (e.g. Google Chrome) there is a way to achieve what you want using the CSS :focus pseudo class:

#foo:focus { border: 2px solid red; }

<input id="foo" type="text"/>

How to remove border(focus-indication) of input field while it is clicked

This is .field:focus{outline: none} not .field:focus{border: none}

Change Bootstrap input focus blue glow

In the end I changed the following css entry in bootstrap.css

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Adding a glow to 3 sides using CSS

You can do it with css :after property. Like this:

div{
    width:100px;
    height:30px;
    -moz-box-shadow: 0 -1px 15px #80abc6;
    -webkit-box-shadow: 0 -1px 15px #80abc6;
    box-shadow: 0 -1px 15px #80abc6;
    margin:30px;
    position:relative;
}
div:after{
    content:'';
    width:10px;
    height:100%;
    background:#fff;
    position:absolute;
    top:0;
    left:-10px;
}

Check this http://jsfiddle.net/QBQJn/1/

Restrict html input box to max width of a border around it

You can style the input type by doing input[type=number] and set the width to 100%. I also added - margin-left to center the input field. This method is 100% responsive on all screens.

   section, h1 {
        padding: 0 1em;
    }
    
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 150px);
        grid-gap: 50px 30px;
    }
    
    .grid-item {
        border: thin #566d7e solid;
        padding: 10px;
    }
    
    .grid-item > label {
        text-align: center;
    }
    
    .grid-item > input {
        margin: 2px;
        word-wrap: true;
    }
/* additions */    
   input[type=number] {
      width: 100%;
      margin-left: -.2rem;
}

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css\abilitiesStyle.css" as="style">
        </head>
    </html>
    <body>
        <header>
        </header>
        <main>
            <article>
                <h1>Abilities, Saves, Senses</h1>
                <section>
                    <div class="grid">
                        <div class="grid-item">
                            <label>STRENGTH</label>
                            <input type="number" name="strengthScore">
                            <label id="strengthModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>DEXTERITY</label>
                            <input type="number" name="dexterityScore">
                            <label id="dexterityModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CONSTITUTION</label>
                            <input type="number" name="constitutionScore">
                            <label id="constitutionModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>INTELLIGENCE</label>
                            <input type="number" name="intelligenceScore">
                            <label id="intelligenceModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>WISDOM</label>
                            <input type="number" name="wisdomScore">
                            <label id="wisdomModifier"></label>
                        </div>
                        <div class="grid-item">
                            <label>CHARISMA</label>
                            <input type="number" name="charismaScore">
                            <label id="charismaModifier"></label>
                        </div>
                    </div>
                </section>
            </article>
        </main>
        <footer>
        </footer>
    </body>

---

Related Topics