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

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

＆＃13;

input#search {
    background-image: url('http://www.clker.com/cliparts/z/1/T/u/9/2/search-icon-hi.png');
    background-size:contain;
    background-repeat: no-repeat;
    text-indent: 20px;
}
input#search:focus {
    background-image:none;
    text-indent:0px
    }

＆＃13;

<input type="text" id="search" name="search" onchange="hideIcon(this);" Placeholder="Search" />

＆＃13;

Answer 2

只需在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>

希望有所帮助

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

2 个答案: