1 easy step to improve search box design

I stumbled upon a great little bit of code called Beautiful Form. It was written for Stylist, a program that is to CSS what Greasemonkey is to javascript. (So, it doesn't show up in Internet Explorer.) I liked it so much and wanted it to be incorporated into BlogU. So, I copied the code, made a few changes so it would blend with my blog and put it in the stylesheet. Here is what the search box looked like before and after:





Here is the code that I used:

@-moz-document url-prefix(http) {
/* change the buttons*/
input[type="reset"], input[type="submit"], button
{
-moz-border-radius: 0.5em !important;
border: 1px solid #CCC !important;
border-bottom: 1px solid #CCC !important;
background-color: #EEE !important;
color: #555555 !important;
}
input, textarea
{
-moz-border-radius: 0.8em !important;
}
input, textarea,select
{
background-color: #FFF !important;
border-top: 1px solid #C3C3C3 !important;
border-right: 1px solid #C3C3C3 !important;
border-bottom: 1px solid #C3C3C3 !important;
border-left: 1px solid #C3C3C3 !important;
color: #555555 !important;
}
/*change them on focus with a blue border*/
input:not([type="button"]):not([type="reset"])
:not([type="submit"]):not([type="checkbox"])
:focus,textarea:focus
{
-moz-outline-radius: 0.8em !important;
}
input:not([type="button"]):not([type="reset"])
:not([type="submit"]):not([type="checkbox"])
:focus, textarea:focus, select:focus
{
-moz-outline: 2px solid #ccc !important;
-moz-outline-offset: -1px !important;
}
/*rollover effect on the buttons*/
input[type="submit"]:hover,input[type="reset"]
:hover,button:hover {
border-color: #E8E9E8 !important;
border-bottom-color:#E8E9E8 !important;
background-color: #FCFCFC !important;
}
}

If you prefer to start with the orginal code, you can find it at userstyles.org.