首頁 >web前端 >css教學 >css怎麼做出好看的搜尋框樣式? (程式碼範例)

css怎麼做出好看的搜尋框樣式? (程式碼範例)

藏色散人
藏色散人原創
2018-08-10 15:18:1723279瀏覽

這篇文章跟大家介紹一個好看的css搜尋框樣式,希望對有興趣的朋友有幫助。

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程式碼測試效果如下圖:

css怎麼做出好看的搜尋框樣式? (程式碼範例)

註:

所有主流瀏覽器都支援

標籤用於蒐集使用者資訊。根據不同的 type 屬性值,輸入欄位擁有多種形式。輸入欄位可以是文字欄位、複選框、遮罩後的文字控制項、單選按鈕、按鈕等等。

如果在 HTML 表單中使用 button 元素,不同的瀏覽器會提交不同的值。 Internet Explorer 將提交 之間的文本,而其他瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 input 元素來建立按鈕。

【相關文章推薦】

css製作好看的搜尋框

HTML實作行動裝置固定懸浮半透明搜索框

分享8款CSS3搜尋框


#

以上是css怎麼做出好看的搜尋框樣式? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn