這篇文章主要介紹css如何在input中插圖片，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為呼瑪等地區用戶提供了全套網頁設計制作服務，及呼瑪網站建設行業解決方案。主營業務為成都網站設計、做網站、呼瑪網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

css在input中插圖片的方法：首先在包含input的div中設置子元素；然后設置外層div定位為relative；接著設置span定位為absolute；最后給input添加margin-left屬性即可。

css在input里插圖片

1、在包含input的div中設置子元素<span>

<div class="search">
    <span></span>
    <input type="text">
</div>

2、設置外層div定位為relative

.search{
    position: relative;
}

3、設置span定位為absolute，并設置寬高和背景圖片

.search > span{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./search.png) no-repeat;
    background-size: 80% 80%;
    background-position: center;
}

4、給input添加margin-left屬性。

.search > input{
    width: 100%;
    padding-left: 20px;
}

5、效果圖

以上是“css如何在input中插圖片”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

標題名稱：css如何在input中插圖片-創新互聯
瀏覽地址：http://vcdvsql.cn/article30/pjeso.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、面包屑導航、定制網站、定制開發、網站營銷、自適應網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯