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

2021-07-03   来源:爱情文章

帝国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;

}

推荐文章:
  • 帝国cms免费模板
  • 帝国cms导航模板
  • 帝国cms搜索表单css3自定义样式模板

    http://m.cqzdj.com/wenzhanghuicui/159597/

    分享

    热门关注

    爱情文章范文(精选6篇)

    爱情文章

    人生感悟的爱情文章范文(精选4篇)

    爱情文章

    爱情文章人生感悟【三篇】

    爱情文章

    最催泪的长篇伤感爱情文章

    爱情文章

    最凄美的现代爱情文章

    爱情文章

    著名的凄美的爱情文章【荐】

    爱情文章

    点赞是种鼓励,打赏给予动力

    爱情文章

    吃鱼伴儿-张小娴散文精选

    爱情文章

    李峤的古诗风月云雾露雨雪山八首

    爱情文章

    dedecms调用正文内容替代描述字数限制的方法

    爱情文章