javascript - 将图像添加到占位符输入类型

Question

我正在尝试创建一个登录表单，但我不知道如何将图像放入占位符中。我目前的代码是

            <span class="material-icons" style="font-size:20px; color: gray; float: left;">person
                <input placeholder="username" type="text">lock
            </span>

            <span class="material-icons" style="font-size:24px; color: gray; float: left;">lock
                <input placeholder="Password" type="text">
            </span>

...但是这些都无法满足我的需要。

我希望图像在输入内部，而不是在它前面。

Answer 1

尝试使用此代码它会在文本字段中显示一个图像作为占位符，当您单击文本字段时它会隐藏。

input#search {
    background-image: url('https://cdn0.iconfinder.com/data/icons/very-basic-2-android-l-lollipop-icon-pack/24/search-512.png');
    background-size:contain;
    background-repeat: no-repeat;
    text-indent: 20px;
    /* Extra Styling */
    padding: 5px 3px;
    transition:0.3s;
}
input#search:focus {
    background-image:none;
    text-indent:0px
}

<input type="text" id="search" name="search" Placeholder="Search" />