图标输入框（一）

本文介绍如何使用 input 元素和 CSS 的 background-image 属性来实现带图标的输入框。效果如下：

HTML

<div class="password-btn">

    <input type="text" />

</div>

CSS

.password-btn {

    border: 2px solid lightgray;

    background: url(./images/lock.ico) no-repeat 5px center;

    width: 210px;

    height: 40px;

}

.password-btn > input {

    padding-left: 42px;

    padding-right: 10px;

    border: none;

    background: none;

    width: 100%;

    height: 100%;

}

解析

div 元素

• 设置 background-image，引用 icon 图片，以此实现输入框前面的图标效果（这里的图片大小需要自己调整好，在此处直接引用）

• background-repeat 设置为 no-repeat

• background-position-x 和 background-position-y 根据实际需求调整

input 元素

• 大小应该和父元素一致

• 根据 icon 图标大小调整 padding-left 值，以此实现光标在图标后输入的效果

• background 要设置为 none，不然 div 的背景会被遮盖

• 不要有自己的 border，不然看起来会不美观

更多 CSS 技巧，请关注微信公众号