HTML在透明輸入框裡新增圖示的實現程式碼

拾貳VII發表於2020-05-19
HTML

最近在寫一個律師推薦前臺的網站，在上面搜尋框這裡出現了問題，我想把搜尋的圖示放在搜尋框裡面，但是弄了半天都不大如意……

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

基本思路

其實就把輸入框與後面的圖示一起放在一個div裡面，然後將輸入框的border設定為0px，最後設定div的border為最終的外邊框

我們最直接上程式碼：

HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查詢的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:

這裡是設定外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這裡是設定裡面的輸入框的長寬、boder為0px、裡面的字型大小、點選不會亮邊框(outline:none)
設定透明度這裡使用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;

總結

到此這篇關於HTML在透明輸入框裡新增圖示的實現程式碼的文章就介紹到這了,更多相關html 透明輸入框圖示內容請搜尋指令碼之家以前的文章或繼續瀏覽下面的相關文章，

相關文章