实现带Icon的Input框布局

效果:


html代码:

<div class="mui-input-row mui-search s-input">

            <input type="text" placeholder="请输入维修单号,车牌号码搜索">

    <div class="inline label account">

        <img src="../../images/s.png"  >

    </div>

</div>

css代码:

.s-input input {

background-color: #EFEFF0;

color: #0000FF !important;

width: 97%;

height: 35px;

line-height: 35px;

border-radius: 6px;

border: 1px solid #EFEFF0;

text-align: left;

padding-left: 35px;

margin: 0;

font-size: 14px;

}

.inline {

display: inline-block;

}

.label {

height: 30px;

width: 30px;

/* background-image: url(../images/s.png) ; */

background-color: #efeff4;

position: relative;

top: -35px;

left: 1px;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

}

.inline>img {

margin: 5px;

width: 2.25rem;height: 2.25rem;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容