图标输入框（一）

来源：互联网发布：wps数据有效性编辑：程序博客网时间：2024/06/05 07:12

本文介绍如何使用 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 技巧，请关注微信公众号

阅读全文

0 0