dedecm搜索框通用CSS样式

凤凰学院整理发布

2020-06-07

<style>
div.search {padding: 1px;}
 
        form {
            position: relative;
            width: 100%;
            margin: 0 auto;
        }
 
        input, button {
            border: none;
            outline: none;
        }
 
        input {
            width: 90%;
            height: 42px;
            padding-left: 13px;
        }
 
        button {
            height: 46px;
            width: 46px;
            cursor: pointer;
            position: absolute;
        }
 
        .bar6 input {
            border: 2px solid #c5464a;
            border-radius: 5px;
            background: transparent;
            top: 0;
            right: 0;
        }
        .bar6 button {
            background: #c5464a;
            border-radius: 0 5px 5px 0;
            width: 60px;
            top: 0;
            right: 0;
        }
        .bar6 button:before {
            content: "搜索";
            font-size: 13px;
            color: #F9F0DA;
        }
</style>
<div class="search bar6">
        <form action="/plus/search.php" method="post">
            <input name="q" type="text" style="height:42px;" placeholder="请输入您要搜索的关键字...">
            <button type="submit"></button>
        </form>
</div>