css怎麼在input中插畫片

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

本教學操作環境：windows7系統、HTML5&&CSS3版本、Dell G3電腦。

建議：css影片教學

css在input裡插圖片

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

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

2、設定外層div定位為relative

.search{
    position: relative;
}

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

r​​rreee

4、為input新增margin-left屬性。

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

5、效果圖

#

以上是css怎麼在input中插畫片的詳細內容。更多資訊請關注PHP中文網其他相關文章！