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

Button

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

Submit

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

Submit

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)

Submit

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

Submit

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)

Submit

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!)

Submit

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

Submit

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!