CSS 实现 input 中添加小图标

最新推荐文章于 2024-10-04 11:04:16 发布

原创最新推荐文章于 2024-10-04 11:04:16 发布 · 2.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

当前文章被收录于：

CSS

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何在HTML的input元素中添加小图标，作者通过CSS实现这一功能，经历了研究和尝试，最终发现可以通过调整图片大小来实现。

据说是个很简单的问题，我却研究了好久/。。。

参照了各路大神的代码/最后发现直接用ps缩小图片也可以

input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    background-image: url("../pics/user.png");/*这里的地址 ../代表上一级文件夹*/
    background-repeat: no-repeat;
    background-position: left;
    padding: 12px 20px 12px 40px;
}