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
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.
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. ;)
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.
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.
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.
:) :) :) :)
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!
Never seen the :focus thingy. Is it a CSS3 feature or earlier versions?
Yoram in hebrew means ‘idiot’ which makes perfect sense here
Julien’s the idiot, not Yoram.
It’s CSS2
: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.
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.
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?
Opacity.
Does this support IE 9 or later?
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
Just want to add that it works as it is on multiline text boxes but not single line
It seems you have forgotten a fallback for older browsers on focus:
or he simply does not give a damn about people that use 100 year old browsers which I find way more professional. why would a professional developer support outdated browsers full of security holes, making the user think it was ok to stay at that old version?
Thanks for sharing this ! Is there a way to apply this to select fields ? It works in mozilla but not in Safari
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?
I don’t exactly want to say this, but try resizing the textarea.
Good catch. When “transition: all” backfires… :)
This should fix the resizing issue:
This works well, but how do I remove the border around the submit button if I’m using an image?
I’ve created a mixin for this if anyone is interested. Just replace
@include transition()
if you’re not using compass.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.
OMG I figured it out. I had a “(” closing bracket instead of a “}” bracket. It’s always the little things.
Try using hotpink. It’s lame.
Cool! I am wondering where this ” ​ ” came from. It was appeared to the browser when I loaded the code.
This is very helpful.
Thanks for this. I’ve been looking everywhere for this. I wish to implement this on select tag. Can anyone help me please??