简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

最簡介的帶有圖示的搜尋框

php中世界最好的语言
發布： 2018-03-08 11:29:30
原創
1892 人瀏覽過

這次帶給大家最簡介的圖示的搜尋框，做出有圖示搜尋框的注意事項有哪些，下面就是實戰案例，一起來看一下。

最簡介的帶有圖示的搜尋框

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form>input[type="search"]{
            height: 50px;
            padding: 10px;
            padding-left: 50px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D);
            background-repeat: no-repeat;
            background-size: 30px 30px;
            background-position:10px ;
            font-size: 20px;
            border: 1px #989898 solid;
        }
    </style>
</head>
<body>
    <form >
        <input type="search" />
    </form>
</body>
</html>
登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

 簡易的圖片點擊上傳功能

#JS可以截取video的標籤影片縮圖嗎？

#

以上是最簡介的帶有圖示的搜尋框的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
搜尋 標的 簡介
來源：php.cn
上一篇：簡易的圖片點擊上傳功能 下一篇：如何快速儲存網頁中的內容並且除去不想要的元素
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
查詢和公式形成整個表，帶有新列，其中新列是涉及其他條件列值的公式 編輯：公式應該是“值”列-根據類別具有最低user_id的“值”列。因此第2行將為0.04，因為類別「A」的最低「user_id」的「value」欄位是0.01。抱歉。我想從表中檢...
來自於 2024-04-06 21:23:40
0
2
530
MERN stack搜尋方塊和複選框的正規表示式篩選器 我正在嘗試透過邊做邊學來了解MERN堆疊如何協同工作，並且我正在遵循bezcoder的這些教程：Node.js/Express/MongoDb（Github整個程式碼）和React...
來自於 2024-04-06 14:53:12
0
1
425
單擊並滾動時隱藏/顯示 div 我想建立一個隱藏的搜尋表單，當我們點擊搜尋圖示時，該表單會出現，而當使用者點擊或捲動時，搜尋表單會隱藏。
來自於 2024-04-06 12:20:46
0
1
386
VueJS 調度函數的執行順序導致問題 我正在嘗試在頁面上顯示公告清單（從API檢索）。我正在使用Vuex商店，並且有一個名為公告的狀態。我還希望每次用戶刷新/進入頁面時都會更新此列表。所以我使用了生命週期鉤子，特別是M...
來自於 2024-04-06 10:37:58
0
1
385
如何在MySQL表中插入多行並傳回新的ID？ 通常我可以在MySQL表中插入一行並取得last_insert_id。但現在，我想將許多行批量插入到表中並獲取ID數組。有人知道我該怎麼做？有一些類似的問題，但並不完全相同。我不想...
來自於 2024-04-06 10:03:44
0
2
294
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！