css搜索框樣式代碼具體示例如下：

<div class="search bar">
    <form>
        <input placeholder="css搜索框代碼測試" name="cname" type="text">
        <button type="submit"></button>
    </form>
</div>

style樣式代碼如下：

* {
    box-sizing:border-box;
}
div.search {
    padding:10px 0;
}
form {
    position:relative;
    width:300px;
    margin:0 auto;
}
input,button {
    border:none;
    outline:none;
}
input {
    width:100%;
    height:42px;
    padding-left:13px;
}
button {
    height:42px;
    width:42px;
    cursor:pointer;
    position:absolute;
}     
.bar input {
    border:2px solid #c5464a;
    border-radius:5px;
    background:transparent;
    top:0;
    right:0;
}
.bar button {
    background:#c5464a;
    border-radius:0 5px 5px 0;
    width:60px;
    top:0;
    right:0;
}
.bar button:before {
    content:"搜索";
    font-size:13px;
    color:#F9F0DA;
}

以上搜索框css代碼測試效果如下圖：

注：

所有主流瀏覽器都支持 <button> 標(biāo)簽。

<input> 標(biāo)簽用于搜集用戶信息。根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

<button> 標(biāo)簽定義一個(gè)按鈕。在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。

如果在 HTML 表單中使用 button 元素，不同的瀏覽器會(huì)提交不同的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其他瀏覽器將提交 value 屬性的內(nèi)容。請?jiān)?HTML 表單中使用 input 元素來創(chuàng)建按鈕。

【相關(guān)文章推薦】

css制作好看的搜索框

HTML實(shí)現(xiàn)移動(dòng)端固定懸浮半透明搜索框

分享8款CSS3搜索框

以上就是css怎么做出好看的搜索框樣式？（代碼示例）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！