Css beautifying the input text box and button

We can see that many website text input boxes are very beautiful, such as taobao. Let's take a look at the code for beautifying the input box with css. You don't need to write HTML. Let's test it on your own. It's pretty.

. SearchBar {
Font-size: 12px; letter-spacing: 2px;
Border-bottom: 1px solid # dddddddd;
Padding: 5px 0px 3px 0px;
Margin: 4px 0px 4px 0px;
Text-align: center; height: 24px;
FILTER: progid: DXImageTransform. Microsoft. Gradient (startColorStr = '# f5f5f5', endColorStr = '# eeeeee', gradientType = '0 ');
}
. SearchBar input. textfield {
Border-top: 1px solid # dddddddd; border-left: 1px solid # dddddddd;
Border-right: 1px solid # ffffff; border-bottom: 1px solid # ffffff;
BACKGROUND-COLOR: # f5f5f5; line-height: 18px;
Width: 240px; HEIGHT: 22px;
}
. SearchBar span. button {
BORDER: 1px outset # f0f0f0;
BACKGROUND-COLOR: # fafafa;
Width: 50px; HEIGHT: 20px;
Padding: 3px 3px 2px 3px;
Cursor: hand;
}