域名預(yù)訂/競價，好“米”不錯過

這篇文章主要介紹了HTML在透明輸入框里添加圖標的實現(xiàn)代碼，代碼簡單易懂，非常不錯對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

最近在寫一個律師推薦前臺的網(wǎng)站，在上面搜索框這里出現(xiàn)了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題 ：

基本思路

其實就把輸入框與后面的圖標一起放在一個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在透明輸入框里添加圖標的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)html 透明輸入框圖標內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

來源：腳本之家

鏈接：https://www.jb51.net/web/717790.html

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！