【www.cqzdj.com--爱情文章】
帝国cms搜索表单css3自定义样式模板，很漂亮的，效果见右侧的搜索文章，真接上代码，可以根据喜好再调整CSS3代码：
一、html代码
<div class="search bar6">
<form name=search_js1 method=post action="[!--news.url--]e/search/index.php" onsubmit="return search_check(document.search_js1);"><input type="hidden" name="show" value="title,smalltext,newstext,writer"><input type=hidden name=classid value=0><input name="keyboard" type="text" id="keyboard" placeholder="请输入您要搜索的内容..."><button type="submit"></button>
</form>
</div>
二、css3代码
* {
box-sizing: border-box;
}
div.search {
padding: 5px;
}
form {
position: relative;
width: 330px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
}
input {
width: 100%;
height: 38px;
padding-left: 13px;
}
button {
height: 38px;
width: 42px;
cursor: pointer;
position: absolute;
}
.bar6 input {
border: 1px solid #DDDDDD;
border-radius: 5px;
background: transparent;
top: 0;
right: 0;
font-size: 15px;
}
.bar6 button {
background: #FC6D63;
border-radius: 0 5px 5px 0;
width: 60px;
top: 0;
right: 0;
}
.bar6 button:before {
content: "搜索";
font-size: 18px;
color: #F9F0DA;
font-weight: bold;
letter-spacing: 3px;
}