Learn and share. The simplest harmony.

 

Stylize Input Element Using CSS3

Posted on April 26, 2010 and got 26 shouts so far

Stylizing input element is a common task for us as a web developer, we can make it look nicer by putting stylized input image (color gradient, smooth border, box shadow, etc) as an input background. Nice but the images also take some of our bandwidth, thankfully CSS3 adds some support for element styling, so we can replace them with only CSS.

 

The Needs and The Basic
While developing web apps I always meet a task to create some input forms, using default input without any style will ruin my web apps theme thus I always styling them. The common way to styling an input element is by putting an image as an input background and then positioning the background properly. Take a look at following example :

image




Photoshop Effect vs CSS3 Properties
At above example, the image is only using some Photoshop technique : color gradient, stroke and drop shadow. Rather than take some time creating images, we can stylize them using only CSS. For replacing the Photoshop techniques we can use CSS3 properties :

  • Color Gradient replace with -webkit-gradient or -moz-linear-gradient property.
  • Stroke replace with border property.
  • Drop Shadow replace with -webkit-box-shadow, -moz-box-shadow or box-shadow property.
  • For rounded corner we can use -webkit-boder-radius, -moz-border-radius or boder-radius property.

Step By Step Styling Them
First we create the default input element using HTML.

	

Picture 1



Add some styling for the text effect : padding, font-size, and text-shadow.

input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
}

Picture 2



Manipulate the input background with linear gradient with starting color with grey (#bcbcbe) and ending color with white (#ffffff).

input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
	background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);
}

Picture 3



To make the input rounded and having a stroke effect we set its border radius with 3pixels and border thickness with 1pixels using darker grey color (#717171).

input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
	background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #717171;
}

Picture 4



Now add drop shadow effect by setting box-shadow property with 1pixels distance on the right and 1pixels distance on the bottom, set 0 for shadow blur and white (#ffffff) for the shadow color.

input {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
	background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #717171;
	-webkit-box-shadow: 1px 1px 0px #efefef;
	-moz-box-shadow: 1px 1px 0px #efefef;
	box-shadow:  1px 1px 0px #efefef;
}

Picture 5



If the input has focus state we add a box shadow effect like Safari, we just need to set the box-shadow property with 0pixels distance on the left and on the bottom, set 5pixels for shadow blur and light blue (#007eff) for the shadow color. This will make a similar effect like Photohop’s Outer Glow effect.

input:focus {
	-webkit-box-shadow: 0px 0px 5px #007eff;
	-moz-box-shadow: 0px 0px 5px #007eff;
	box-shadow: 0px 0px 5px #007eff;
}

Picture 6



Conclusion
We have stylizing our default input until it’s similar to the input with image background. Don’t forget to take advantages of CSS3 for replacing image usage. Ok, that’s it and thanks for reading! ;)

 

This Post Tags :

Bookmark Post :

Pin It
  • kayak komentar ini nih ada stylize inputnya yah…xixixixi

  • Great tutorial.

    he wonders of CSS3, been trying to figure out how to do something like this for a while now, thank you for sharing.

  • yeow… thanks a lot… I hoope you wouldn’t mind, i’ll use it to my site…

  • dahsyat kaka..!

  • You can actually add a filter to make this work in IE5 and up:
    input {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bcbcbe, endColorstr=#FFFFFF);}

  • very useful article, thanks

  • Kalo di IE gag ada ya propertis gradiasinya ?

  • @Ladiesman217 : Memang tidak dibuat hack untuk IE-nya

  • siiip saya cari2 cara bikin textfield yg kayak di twitter, ternyata ketemu disini jg.
    makin sip nih blog!
    thanks!

  • @Rendicahya Alhamdulillah klo bermanfaat :)

  • firefox, safari, chrome :)
    IE, opera :(

  • Very useful tutorial… Thank’s

  • Nice work! Thanks for sharing. But, this styling doesn’t work in IE. How can I make it work in IE also? Please help me to do it in IE too.

  • Very nice look, thanks for share it.

  • dont work on google chorme

  • Thank u . This is awesome

  • Exactly what I was looking for! Thanks for posting this :D Now I can make my search/comment forms pretty :D

  • wow thanks a lot !

  • useful ! thank you :) , but yeah, still few bugs on opera..

  • best styling ever :)

  • Thx u so much that’s very useful!! i have to test it on all the navigator ;)

  • Thanks, Nice tutorial

  • Use rgba(255,255,255,0.5) on box-shadows for better blending in with design. Alpha the drop shadow.

  • Super!! Thx

  • sallam

  • Thank’s so much..it’s very nice..