Comments

CSS3 Form Styling Cheat Sheet

I hate styling forms. I never remember them. So here are the styles I use the most. *Be mindful of browser compatibility (see chart). Woo. — Tiffany

Input Styling

Basic

Select
								border:0; 

								padding:10px; 

								font-size:1.3em; 

								font-family:Arial, sans-serif; 

								color:#aaa; 

								border:solid 1px #ccc; 

								margin:0 0 20px; 

								width:300px;

Rounded Corners

Select
								-webkit-border-radius: 3px; 

								-moz-border-radius: 3px; 

								border-radius: 3px;

For the lazies, I use this: Border Radius Generator

Shadow Inset

Select
								-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 

								-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 

								box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);

Shadow Inset - Top

Select
								 -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); 

								-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); 

								box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);

Thanks stackoverflow

White Shadow - Bottom - Rounded Corners (best on colored backgrounds)

Select
								-webkit-box-shadow: 0px 1px rgba(255, 255, 255, 0.5); 

								-moz-box-shadow: 0px 1px rgba(255, 255, 255, 0.5); 

								box-shadow: 0px 1px rgba(255, 255, 255, 0.5); 

								-webkit-border-radius: 3px; 

								-moz-border-radius: 3px; 

								border-radius: 3px;

Active State

Select
								input:focus { 

									border:solid 1px #EEA34A; 

								}

Button Styling

Basic

Select
								border:solid 1px #ccc; 

								padding:15px 30px; 

								margin:0 0 20px; 

								font-family:Arial, sans-serif; 

								font-size:1.2em;

								text-transform:uppercase;

								font-weight:bold;

								color:#333;

								cursor:pointer;

Gradient

Select
								background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa)); 

								background-image: -webkit-linear-gradient(top, #ddd, #aaa); 

								background-image: -moz-linear-gradient(top, #ddd, #aaa); 

								background-image: -ms-linear-gradient(top, #ddd, #aaa); 

								background-image: -o-linear-gradient(top, #ddd, #aaa); 

								background-image: linear-gradient(top, #ddd, #aaa); 

								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#aaa',GradientType=0 ); /* IE6-9 */

Gradient - Top Inset Shadow (best used with a border)

Select
								-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); 

								-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); 

								box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

Gradient - Bottom Shadow

Select
								-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 

								-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); 

								box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);

Gradient - Top Inset + Bottom Shadow (separated by a comma)

Select
								-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); 

								-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); 

								box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);

Gradient - Top Inset + Bottom Shadow + Rounded Corners (all together!)

Select
								-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); 

								-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); 

								box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);

								-webkit-border-radius: 3px; 

								-moz-border-radius: 3px; 

								border-radius: 3px;

Gradient - Text Shadow

Select
								text-shadow: 0px -1px 1px rgba(255, 255, 255, 0.8);

...and that's it for now. I have to stop procrastinating and get back to work. Feel free to leave a comment with more tips or suggestions!