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. User Avatar
    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.

    • User Avatar
      Chris Burnell
      Permalink to comment#

      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.

    • User Avatar
      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. ;)

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      deepu
      Permalink to comment#

      Tab index is useful while hadling forms. if set all inputs same index, then it will focus next to next, by default it is there in html. So Use this only when u needed.

    • User Avatar
      Athul
      Permalink to comment#

      :) :) :) :)

  2. User Avatar
    Andru Stoicescu
    Permalink to comment#

    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. User Avatar
    Yoram Global

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

    • User Avatar
      julien
      Permalink to comment#

      Yoram in hebrew means ‘idiot’ which makes perfect sense here

    • User Avatar
      troy
      Permalink to comment#

      Julien’s the idiot, not Yoram.

    • User Avatar
      Aeroflare
      Permalink to comment#

      It’s CSS2

    • User Avatar
      bezinga
      Permalink to comment#

      :focus is for that when u click something t will have a effect. So when you put a colour in the :focus once you click it will be that colour.

  4. User Avatar
    Lee Marshall

    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. User Avatar
    Namanyay Goel

    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. User Avatar
    Muhib
    Permalink to comment#

    Does this support IE 9 or later?

  7. User Avatar
    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

    • User Avatar
      Msuth
      Permalink to comment#

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

  8. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Lucas
    Permalink to comment#

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

    • User Avatar
      Valjean
      Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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;
        }
    }
    
  14. User Avatar
    Gary Jones
    Permalink to comment#

    I SO want this effect! I have tried everything but it won’t work. I’ve used the exact CSS and HTML but when I check the code for the field all I see is “#textarea” with no formatting. I don’t see anything on a regular field like “name”. The form is at http://www.prismcareernetworks.com/?page_id=325. Really appreciate any help. I have three complex forms to design.

  15. User Avatar
    Gary Jones
    Permalink to comment#

    OMG I figured it out. I had a “(” closing bracket instead of a “}” bracket. It’s always the little things.

  16. User Avatar
    Dennis
    Permalink to comment#

    Try using hotpink. It’s lame.

  17. User Avatar
    Rom
    Permalink to comment#

    Cool! I am wondering where this ” ​ ” came from. It was appeared to the browser when I loaded the code.

  18. User Avatar
    Md. Anowar Hossain
    Permalink to comment#

    This is very helpful.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag