帝国cms搜索表单css3自定义样式模板

帝国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
}
样式看下图