html - 在输入表单中添加图标，并在图标之后开始输入。

Question

对于你们中的一些人来说，这将是一个简单的问题，但我在 CSS 和样式方面并不是最好的，我更喜欢后端开发。基本上我正在设计一个登录表单，我希望它看起来像这样：

背景，登录按钮都很好。简单。

我使用了一些 CSS 并且可以将图标放入输入中，但是当用户开始输入时，它会在图标上输入。我想要做的是分隔图标部分，用户在绿线之后开始输入。

#password {

    background-image:url('../images/pw_icon.png');
    background-repeat:no-repeat;
    height: 30px;
}

那是我到目前为止的CSS。我已经看到这样做了，但经过几次 Google 搜索后找不到任何示例。

任何人都可以指导我举一个例子或有一些话来指出我正确的方向吗？

Answer 1

CSS

#password {
    background-image:url('../images/pw_icon.png') no-repeat center left;
    height: 30px;
    padding-left: 30px;
}

这应该适合你。