當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

HTML在透明輸入框里添加圖標(biāo)的實(shí)現(xiàn)代碼

 2021-01-29 16:13  來源: 腳本之家   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

這篇文章主要介紹了HTML在透明輸入框里添加圖標(biāo)的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

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

話不多說,我們直接進(jìn)入主題 :

基本思路

其實(shí)就把輸入框與后面的圖標(biāo)一起放在一個(gè)div里面,然后將輸入框的border設(shè)置為0px,最后設(shè)置div的border為最終的外邊框

我們最直接上代碼:

HTML:

<div class="search">
        <form action=http://baidu.com>
           <input type="text" placeholder="請(qǐng)輸入查找的律師或?qū)iL(zhǎng)">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:

這里是設(shè)置外面整個(gè)div的樣式

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

這里是設(shè)置里面的輸入框的長(zhǎng)寬、boder為0px、里面的字體大小、點(diǎn)擊不會(huì)亮邊框(outline:none)

設(shè)置透明度這里使用rgba(),最后一個(gè)屬性就是透明度(在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)的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)html 透明輸入框圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

來源:腳本之家

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

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
html

相關(guān)文章

  • 網(wǎng)站頁(yè)面一定需要HTML靜態(tài)化嗎 實(shí)戰(zhàn)說明靜態(tài)化的必要性

    很多剛開始運(yùn)營(yíng)網(wǎng)站的伙伴們都要知道網(wǎng)站內(nèi)的頁(yè)面需要進(jìn)行URL優(yōu)化嗎?如設(shè)置靜態(tài)化等,對(duì)此,本文就為大家解析一下網(wǎng)站靜態(tài)化的必要性,有興趣的朋友們可以了解下哦

    標(biāo)簽:
    html
  • 在html頁(yè)面中取得session中的值的方法

    這篇文章主要介紹了在html頁(yè)面中取得session中的值的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

    標(biāo)簽:
    html
  • 如何通過HTML代碼提高SEO的效果

    我們的網(wǎng)頁(yè)是由HTML(超文本標(biāo)記語言)元素組成的。甚至對(duì)于ASP、PHP和其他動(dòng)態(tài)頁(yè)面,服務(wù)器也會(huì)將ASP或PHP語句呈現(xiàn)為相應(yīng)的HTML元素并發(fā)送給客戶端;對(duì)于JavaScript和其他動(dòng)態(tài)頁(yè)面,客戶端會(huì)將它們轉(zhuǎn)換為HTML。

    標(biāo)簽:
    seo優(yōu)化
    html
  • 解決vscode 中保存后html自動(dòng)格式化的問題

    這篇文章主要介紹了vscode中保存后html自動(dòng)格式化的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

  • Html技巧 語義化你的代碼

    最近在讀阿當(dāng)?shù)摹禬eb前端開發(fā)修煉之道》,其中有不少東西值得前端路上的朋友學(xué)習(xí).結(jié)合自己日常編碼的一些經(jīng)驗(yàn),我將陸陸續(xù)續(xù)將一些從書中學(xué)到的以及自己總結(jié)的一些前端方面的技巧分享給大家

    標(biāo)簽:
    html

熱門排行

信息推薦