Grow your CSS skills. Land your dream job.

Last updated on:

Glowing Blue Input Highlights

Like mid-2012 Twitter.

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-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, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

See the Pen Glowing Blue Inputs by Chris Coyier (@chriscoyier) on CodePen

Reference URL

Comments

  1. BrianC
    Permalink to comment#

    Great, but was wondering what the “tabindex=1″ in the HTML meant? I guess it is something to do with tab on the keyboard, but couldnt find anything on it.

    • Tabindex defines the position (0 – 32767) the element has in the tabbing order of the page – this would likely be done for people using screen readers.

    • Hugo
      Permalink to comment#

      If no mistake, tabindex is used to control the keyboard navigation through the tab key.
      tabindex=”1″ means it’s the first element to be focused when you hit tab. Then you’ll go to the next in the flow, or to the tabindex=”2″ if there is one.

      I personnaly do not use tabindex because the regular flow implies it, but when you have some tricky navigation like 2 rows of input (just saying), then perhaps you’ll want the focus to go to the bottom first or so.

      I guess the only case I use tabindex is for an input not-displayed field used to spot spam-bots : I set it to tabindex=”-1″ to prevent some weird behaviour.

      By the way Chris, really nice glowing focus styles. ;)

    • Robbie
      Permalink to comment#

      This is for manually specifying the order of your form elements. Browsers and screen readers will automatically order them by the order in the source code. Specifying the tabindex will override that tab order behavior.

    • Ryan Hemphill
      Permalink to comment#

      Tabindex is an important feature for accessibility and isn’t something to be avoided. No offense. If you are considering tabindex, the best implementations are done with tabindex=”0″ and tabindex=”-1″. The 0 value will insure that your tabbing behaviors follow the DOM flow, so nothing weird to worry about. -1 avoids keyboard tabbing while still maintaining its ability to be focused, such as would happen with the mouse.

      I would also mention that those of you that have to set up a form should pay attention to tabindex order (known by some as focus management) because it can insure your users don’t get frustrated if they are trying to tab through the interface. Typically, you shouldn’t be using an ordering system in that form though, so I would recommend against tabindex=”1″ and stick to making certain that the DOM flow reflects a tabindex=”0″ approach.

      The glow is a pretty good one, btw. Not too over the top, like some samples I’ve been seeing.

  2. Hi Chris,

    I love using the box shadow and the transition properties to create this effect.
    However on select tags, this effect is not that straight forward to implement as it is on inputs or textareas. What would be your approach to apply a similar with a cross browser compatibility – of course I am talking about the browsers that support CSS3.

    Thanks!

  3. Never seen the :focus thingy. Is it a CSS3 feature or earlier versions?

  4. Very nice simple effect.

    I’ve seen it done but never put the thought in to how it works.

    Turns out to be quite easy.

    Its got me thinking about inputs and using colours to indicate what I want site users to do. Subliminal directions.

  5. I just don’t get one thing. Why is RGBA used? Won’t a simple hex code be easier? Does it give some sort of added benefit?

  6. Muhib
    Permalink to comment#

    Does this support IE 9 or later?

  7. Msuth
    Permalink to comment#

    Is there a way to add this to *some* form inputs?

    I’ve tried adding this to a wordpress site I’m making to include within a Contact form. The trouble is it adds it to all other inputs (my search box for instance)

    I’ve tried to give them class names i.e blueform and blueform focus but it still picks them up.

    Thanks,

    msuth

    • Msuth
      Permalink to comment#

      Just want to add that it works as it is on multiline text boxes but not single line

  8. adam
    Permalink to comment#

    It seems you have forgotten a fallback for older browsers on focus:

    
    input[type=text], textarea {
      @include transition (all .30s ease-in-out); /*scss mixin */
      outline: none;
      border: 1px solid #DDDDDD;
    }
     
    input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus {
      box-shadow: 0 0 5px rgba(81, 203, 238, 1);
      border: 1px solid #5ee3ff;
      border: 1px solid rgba(81, 203, 238, 1);
    }
    
  9. Arun
    Permalink to comment#

    Thanks for sharing this ! Is there a way to apply this to select fields ? It works in mozilla but not in Safari

  10. Byron
    Permalink to comment#

    I’m not sure if this is what people are looking for in terms of applying this CSS to select fields, but the original code ([type=text]) applies the block to any input element that has a text property. If you put a specific class/ID only on those fields you want affected, you can call that class/ID instead of “input[type=text]“. Just find and replace.

    I’ve never encountered a scenario where doing this has still applied the block to ALL input fields, but if anyone does I imagine specifying one block for “input[type=text]” and another for your specific fields might solve the problem?

  11. Lucas
    Permalink to comment#

    I don’t exactly want to say this, but try resizing the textarea.

    • Valjean
      Permalink to comment#

      Good catch. When “transition: all” backfires… :)

    • Brian
      Permalink to comment#

      This should fix the resizing issue:

      input[type=text], textarea {
        -moz-transition-property: -moz-box-shadow, border;
        -o-transition-property: -o-box-shadow, border;
        -webkit-transition-property: -webkit-box-shadow, border;
        transition-property: box-shadow, border;
      
        @include transition-duration(250ms);
        @include transition-timing-function(ease-in-out);
      
        outline: none;
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid #DDDDDD;
      }
      
  12. Anton
    Permalink to comment#

    This works well, but how do I remove the border around the submit button if I’m using an image?

  13. Brian
    Permalink to comment#

    I’ve created a mixin for this if anyone is interested. Just replace @include transition() if you’re not using compass.

    @mixin input-glow($glow-color, $border-color) { // Gives a glow effect around text inputs
        @include transition(all 0.4s ease-in-out 0s); // Glow appears slowly
        border: 1px solid $border-color; // Set "invisible" border so field width doesn't change when clicked
        padding: 3px;
        outline: none; // Remove Chrome's default input style
    
        &:focus { // Glow when input field is clicked
            box-shadow: 0px 0px 5px $glow-color;
            border: 1px solid $glow-color;
        }
    
        &:hover { // Glow when input field is hovered over
            box-shadow: 0px 0px 5px $glow-color;
            border: 1px solid $glow-color;
        }
    }
    

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".