input标签中添加一个图标

在input标签中添加一个icon图标基本可以分为两种

1.将icon图标存储为本地图片，然后设置为input的背景图，然后通过background-position来调整图标在输入框的位置
2.使用一个div包裹两个子div，其中第一个div里面包裹icon图标，另一个div包裹input标签，并设置input的border为none，然后让input标签撑满div，设置div的border，然后使用flex布局使两个子div成行排列，并让两个div撑满父div（height，width）
第一种实现方式：

#user {
    background: url("img/user.png") no-repeat;
    background-position: 10px 8px;
}

#password {
    background: url("img/password.png") no-repeat;
    background-position: 10px 9px;
}

第二种实现方式：

#container {
    height: 20%;
    width: 90%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

#icon {
    height: 2rem;
    width: 2rem;
    box-sizing: border-box;
    padding: 5px;
}

#input {
    border: 1px solid #ccc;
}

form input {
    border: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

本文地址：https://blog.csdn.net/weixin_45277161/article/details/110238578