HTML在透明輸入框里添加圖標(biāo)的實現(xiàn)代碼
發(fā)布時間：2020-03-27 16:39:57 作者：拾貳VII 
我要評論
我要評論這篇文章主要介紹了HTML在透明輸入框里添加圖標(biāo)的實現(xiàn)代碼，代碼簡單易懂，非常不錯對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
最近在寫一個律師推薦前臺的網(wǎng)站，在上面搜索框這里出現(xiàn)了問題，我想把搜索的圖標(biāo)放在搜索框里面，但是弄了半天都不大如意……
話不多說，我們直接進(jìn)入主題 ：
基本思路
其實就把輸入框與后面的圖標(biāo)一起放在一個div里面，然后將輸入框的border設(shè)置為0px，最后設(shè)置div的border為最終的外邊框
我們最直接上代碼：
HTML：
<div class="search">
<form action="http://baidu.com">
<input type="text" placeholder="請輸入查找的律師或?qū)ｉL">
<span>
<a href="#"><img src="img/icon1.png" alt=""></a>
</span>
</form>
</div>
CSS:
這里是設(shè)置外面整個div的樣式
.search {
width: 250px;
height: 35px;
border: 1px solid white;
border-radius: 30px;
}
這里是設(shè)置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)
設(shè)置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間 ）
input {
width: 200px;
height: 35px;
border: 0;
font-size: 14px;
outline: none;
background-color: rgba(255, 255, 255, 0);
color: white;
font-size: 16px;
margin: 0 10px;
總結(jié)
到此這篇關(guān)于HTML在透明輸入框里添加圖標(biāo)的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)html 透明輸入框圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML5去掉輸入框type為number時的上下箭頭的實現(xiàn)方法
這篇文章主要介紹了HTML5去掉輸入框type為number時的上下箭頭的實現(xiàn)方法,需要的朋友可以參考下2020-01-03
html5實現(xiàn)輸入框字?jǐn)?shù)限制提示抖動效果
html5實現(xiàn)輸入框字?jǐn)?shù)限制提示抖動效果，效果圖為藍(lán)色背景，輸入文字時并伴有橫條加載效果，當(dāng)超過限制字符時，輸入框抖動效果代碼。本段代碼可以在各個網(wǎng)頁使用，有需要的2018-03-01- 本文給大家介紹如何使用html5為輸入框添加語音輸入功能，實現(xiàn)方法很簡單，需要的朋友參考下本文2017-02-06
- 設(shè)計師會對網(wǎng)頁中用戶經(jīng)常用的東西進(jìn)行優(yōu)化，比如輸入框。一般的輸入框是怎樣優(yōu)化的呢？例如當(dāng)鼠標(biāo)懸浮在輸入框時改變輸入框顏色、自動選中輸入框中的默認(rèn)文字2014-05-18
