HTML5 CSS3 glowing border for input text, textarea

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

CSS3 glowing textfields

Ok so lets let back to business.

Let take the markup below to start with

The Markup

[geshi lang=”html5″ nums=”1″ target=”_self” ]

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” ]

 

 

The CSS – Red theme

[geshi lang=”css” nums=”1″ target=”_self” ]

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,

 

 

Comments

  1. thanks:)
    very simple and helpful code

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.