html - 输入框添加图标，图标后开始输入。

Question

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

背景、登录按钮都不错。简单。

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

#password {

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

这是我目前拥有的 CSS。我已经看到这样做了，但在谷歌搜索几次后找不到任何例子。

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

Answer 1

CSS

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

这应该适合你。