Javascript 将图像添加到占位符输入类型_Javascript_Html_Css

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

javascript html css

Javascript 将图像添加到占位符输入类型,javascript,html,css,Javascript,Html,Css,我正在尝试制作一个登录表单，但我不知道如何使用占位符将图像放入其中。我现在的代码是 <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: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>

人
锁
锁

……但这些都不能满足我的需要

我希望图像位于输入的内部，而不是前面。

只需在CSS中使用background属性和class

       <html>
            <head>
            <title></title>
        <style type="text/css" media="screen">
        input.test{
           padding: .5em; 
        }
        input.icon[value="SEARCH WORDS"]{
            padding-left:48px; 
            background: 
url(https://material.io/icons/static/images/icons-180x180.png) no-repeat 8px center;
        }
    </style>
</head>
<body>
    <input class="icon" value="NOT SEARCH WORDS">
    <input class="icon" value="SEARCH WORDS">
</body>


输入测试{
填充：.5em；
}
input.icon[value=“搜索词”]{
左侧填充：48px；
背景：
网址(https://material.io/icons/static/images/icons-180x180.png)无重复8px中心；
}

希望这会有所帮助，只要在CSS中对类使用background属性即可

       <html>
            <head>
            <title></title>
        <style type="text/css" media="screen">
        input.test{
           padding: .5em; 
        }
        input.icon[value="SEARCH WORDS"]{
            padding-left:48px; 
            background: 
url(https://material.io/icons/static/images/icons-180x180.png) no-repeat 8px center;
        }
    </style>
</head>
<body>
    <input class="icon" value="NOT SEARCH WORDS">
    <input class="icon" value="SEARCH WORDS">
</body>


输入测试{
填充：.5em；
}
input.icon[value=“搜索词”]{
左侧填充：48px；
背景：
网址(https://material.io/icons/static/images/icons-180x180.png)无重复8px中心；
}

希望对您有所帮助

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

input#搜索{
背景图像：url（'http://www.clker.com/cliparts/z/1/T/u/9/2/search-icon-hi.png');
背景尺寸：包含；
背景重复：无重复；
文本缩进：20px；
}
输入#搜索：焦点{
背景图像：无；
文本缩进：0px
}

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

input#搜索{ 背景图像：url（'http://www.clker.com/cliparts/z/1/T/u/9/2/search-icon-hi.png'); 背景尺寸：包含；背景重复：无重复；文本缩进：20px； } 输入#搜索：焦点{ 背景图像：无；文本缩进：0px }

两个选项：使用pesudo元素
材质图标：：在之后或添加img 标记并绝对定位选项组合：使用pesudo元素材质图标：：在之后或添加img 标记并绝对定位