CSS大多数时候被用来装饰静态网页的样式，而搜索框则是网站中最常用的输入交互控件之一。如何用CSS给搜索框添加美丽的样式？下面我们就来分享一下搜索框美化代码。

/* 美化搜索框样式 */
.search-box {
position: relative;
width: 350px;
}
/* 美化搜索框输入框样式 */
.search-box input[type="text"] {
width: 100%;
height: 40px;
padding: 10px 15px;
font-size: 16px;
font-weight: 400;
line-height: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* 美化搜索框提交按钮样式 */
.search-box button[type="submit"] {
position: absolute;
top: 9px;
right: 10px;
height: 40px;
width: 65px;
font-size: 16px;
font-weight: 400;
line-height: 40px;
text-align: center;
color: #fff;
background-color: #3d3d3d;
border: none;
border-radius: 4px;
cursor: pointer;
}

以上代码包括了搜索框、输入框以及提交按钮三个部分的美化样式，包括颜色、字体、背景等方面的样式调整，并添加了一些圆角、阴影等效果。将以上代码应用到你的搜索框中，你会看到你的搜索框也变得与众不同并更符合网站整体风格了。