HTML在透明輸入框里添加圖標的實現代碼

2020年04月15日 22:47 來源:站長投稿 作者:佚名

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

話不多說,我們直接進入主題 :

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面,然后將輸入框的border設置為0px,最后設置div的border為最終的外邊框

我們最直接上代碼:

HTML:

1

2

3

4

5

6

7

8

<div class="search">

        <form action="

           <input type="text" placeholder="請輸入查找的律師或專長">

               <span>

                 <a href="#"><img src="img/icon1.png" alt=""></a>

               </span>

          </form>

</div>

CSS:

這里是設置外面整個div的樣式

1

2

3

4

5

6

.search {

    width: 250px;

    height: 35px;

    border: 1px solid white;

    border-radius: 30px;

}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)
設置透明度這里使用rgba(),最后一個屬性就是透明度(在0-1之間 )

1

2

3

4

5

6

7

8

9

10

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;

更多互聯網行業動態>>請關注微信公眾號“我要啦統計”(微信ID:Analysis_51la)

探討產品的使用及網站經驗交流>>歡迎進入“51LA站長交流群”(Q群:608879616