添加图标到输入表单，并在图标后面开始输入。

Question

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

背景，登录按钮都很好。 simples。

我使用了一些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;
}

这应该适合你。