原文:input中加入搜索圖標

剛吃了一份宮保雞丁刀削面,幸福感滿滿,寫篇博客消耗一下熱量。 今天工作遇到的一個問題是在input輸入框中加入圖標,當輸入內容后,圖標和提示語一起隱藏,類似於placeholder的功能。如淘寶頁面,效果如下: 剛開始我以為是使用了placeholder,想了半天也不知道怎么把圖標引入placeholder里面去,索興打開淘寶頁面,按下鍵盤上F ,跟隨我一起來探索淘寶前端工程師不為人知的秘密吧, ...

2015-08-14 20:11 2 28870 推薦指數:

查看詳情

input中加入搜索圖標

1. HTML代碼: 其實結構非常簡單,最外層放一個div盒子,里面放三個元素:一個label,一個input,一個i標簽。使用for屬性將label與input綁定,label用來顯示字符串,i標簽引入圖標input干好本職工作就行了——提供輸入框。我這里是用的amazeUI ...

Mon Oct 01 01:04:00 CST 2018 0 3686
bootstrap在input中加入icon圖標

實際效果 對css樣式進行修改,才能使icon圖標垂直居中,然后居左 下面的line-height: 50px,因為我的input框是50px高 然后這利的left:20px 如果你不給,icon圖標就是靠右對齊 ...

Fri May 04 03:57:00 CST 2018 0 12735
利用css制作搜索圖標

我記得好像是從哪復制來的,無所謂,都是我的~~~~ 就是下面的這個框 ...

Sun May 17 23:34:00 CST 2020 0 919
Vue 實戰-2 輸入框加搜索圖標

分兩種情況:屬性/插槽slot 屬性:<el-input v-model="s_domain" placeholder="請輸入域名" style="width: 25%" size="small" @keyup.enter.native="doSearch ...

Thu Dec 31 01:47:00 CST 2020 0 860
element的input中加入可點擊的按鈕

如圖,如何在element組建的el-input的后綴放一個可點擊的按鈕或者標簽 在el-input的官網介紹中,可以使用slot的關鍵字給輸入框的框首、框尾加標簽或者icon或者按鈕 ...

Tue Dec 15 04:51:00 CST 2020 0 5330
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM