Hello,
CSS3 and HTML5 are two technologies which I am trying to mater but there is so much to cover. I write post of these sorts so that the thing that I learned today stick with me. Someone said that
“A dullest pencil is better than a brightest memory” – so my writings serves as notes to me more too often too.
In this post I am going to show you how you can make your textfields and textareas glow when they get user focus.
The output will be something like this
Ok so lets let back to business.
Let take the markup below to start with
The Markup
[geshi lang=”html5″ nums=”1″ target=”_self” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form action="#" method="post"> <div> <label for="name">First name</label> <input type="text" name="name" id="name" value="" tabindex="1" autofocus /> </div> <div> <label for="last_name">Last name</label> <input type="text" name="last_name" id="last_name" value="" tabindex="2" /> </div> <div> <label for="textarea">Message</label> <textarea cols="45" rows="10" name="textarea" id="textarea"></textarea> </div> <div> </form> |
Now lets see what will make them glow. I will through 2 themes but you can change colors based on your website’s theme
The CSS – Grey theme
[geshi lang=”css” nums=”1″ target=”_self” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
input[type=text], textarea { outline: none !important; padding: 4px; margin-top: 8px; border: 2px solid #DDDDDD; border-radius:15px; } input[type=text]:focus, textarea:focus { box-shadow:1px 1px 25px rgba(174, 174, 174, 1); padding: 4px; margin-top: 8px; border: 2px solid rgba(174, 174, 174, 1); } |
The CSS – Red theme
[geshi lang=”css” nums=”1″ target=”_self” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
input[type=text], textarea { outline: none !important; padding: 4px; margin-top: 5px; border: 2px solid #C00; border-radius:15px; } input[type=text]:focus, textarea:focus { box-shadow:1px 1px 25px rgba(174, 0, 0, 0.5); padding: 4px; margin-top: 8px; border: 2px solid #C00; } |
The Demo
Demo for the above code can be found here
http://jaspreetchahal.org/examples/css-examples/glowing_form_input_textarea.html
Notice the way I used attribute autofocus in the first textfield in our example markup? If you want to learn more about this attribute please read this.
http://jaspreetchahal.org/html5-auto-focus-textfield-textarea-example-without-using-javascript/
If you would like to add more to the above examples please do so using comments section.
I hope that this helps
Cheers,
thanks:)
very simple and helpful code