input[type="text"] { width: 400px; }
textarea { width: 600px; height: 275px; }
label { color: #989898; }
input, textarea { background-color: rgba(115, 115, 115, 1); border: 5px solid rgba(122, 192, 0, 0.15); padding: 10px; color: #4b4b4b; -webkit-border-radius: 5px; }




input:focus, textarea:focus { border: 5px solid #9E36F2; background-color: rgba(255, 255, 255, 1); }




input[type="submit"] { border: none; cursor: pointer; color: #fff; padding: 5px 36px 8px 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #989898),
color-stop(0.62, #dddddd)
);
background: -moz-linear-gradient(
center bottom,
#989898 23%,
#dddddd 62%
);
}




input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #9E36F2;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #521C7C),
color-stop(0.62, #9E36F2)
);
background: -moz-linear-gradient(
center bottom,
#521C7C 23%,
#9E36F2 62%
);
}
input[type="submit"]:active { top: 1px; }

#contact-mail-page {
	background: #777;
	padding: 20px 40px;
}
#contact-mail-page, #user-login, #user-pass, #user-register {
	background: #777;
	padding: 20px 50px 20px 30px!important;
}
.box h2, .bodyr .body.bdysrch .box h2 {
	background: #181818;
	padding: 12px;
	font-size: 18px;
	color: #717171;
	font-weight: normal;
}
.box h2 {
	background: #555;
	color: #000;
}
#contact-mail-page {
	height: 1%;
	overflow: hidden;
}
#contact-mail-page .form-item {
	padding: 5px 0;
	clear: both;
}
#contact-mail-page label, #user-login label, #user-pass label, #node-form label, #user-register label, #user-profile-form label {
	font-size: 13px;
	color: #DDD;
	padding: 3px 0;
	display: block;
}

#contact-mail-page .form-text, #contact-mail-page .form-textarea, #user-login .form-text, #user-pass .form-text, #user-register .form-text, #user-profile-form .form-text {
	width: 100%;
	padding: 10px;
	background: #999;
	border: none;
}
/* #comment-form #edit-submit, #comment-form #edit-preview, #contact-mail-page #edit-submit, .bdysrch #edit-submit, .node-form #edit-preview, .node-form #edit-submit, #user-login #edit-submit, #user-pass #edit-submit, .view-issues #edit-submit, #user-register #edit-submit */

#edit-submit, #edit-delete, #edit-preview, #edit-submit-1, #edit-delete-1, #edit-preview-1 {
	background:#777 url(images/comment_btn.gif) no-repeat 0 0;
	border: none;
	width: 120px;
	height: 24px;
	cursor: pointer;
	margin: 10px 0;
	color: #AAA;
}
#node-form .form-text {
	padding: 10px;
	border: none;
	width: 93%;
}
#edit-submit:hover, #edit-delete:hover, #edit-preview:hover {
	color: #DDD;
}

#contact-mail-page .form-text:hover, #contact-mail-page .form-textarea:hover, #user-login .form-text:hover, #user-pass .form-text:hover, #user-register .form-text:hover, #user-profile-form .form-text:hover {
	background: #BBB;
}

#contact-mail-page .form-text:focus, #contact-mail-page .form-textarea:focus, #user-login .form-text:focus, #user-pass .form-text:focus, #user-register .form-text:focus, #user-profile-form .form-text:focus {
	background: #FFF;
}

#contact-mail-page .form-textarea {
	width: 103%;
	font-size: 12px;
	line-height: 20px;
	font-family:"Lucida Grande", Calibri, Helvetica, Arial;
	height: 80px;
}
#contact-mail-page .form-textarea {
	width: 105%!important;
}

highlights on active state. uses css gradients

usable drupal contact form

drupal

CSS