23

我想将图像图标添加到输入占位符，如下图所示： 在此处输入图像描述

请注意，这是一个占位符，因此当用户开始输入时，该图标也会消失。

我为使用::-webkit-input-placeholder和::before. 不幸的是，简单的 Mozilla 应用程序似乎不起作用。

所以我的问题是：是否有跨浏览器解决方案可以将图像图标添加到输入占位符？

webkit的解决方案：

#myinput::-webkit-input-placeholder::before { 
    content: ' ';
    position: absolute;
    top: 2px; /* adjust icon position */
    left: 0px;
    width: 14px; /* size of a single icon */
    height: 14px;
    background-image: url("/path/to/icons.png"); /* all icons in a single file */
    background-repeat: no-repeat;
    background-position: -48px 0px; /* position of the right icon */
}
4

5 回答 5

59
  1. 您可以将其设置为background-image并使用text-indent或 apadding将文本向右移动。
  2. 你可以把它分成两个元素。

老实说，如果没有很好的后备，我会避免使用 HTML5/CSS3 。有太多人使用不支持所有新奇事物的旧浏览器。不幸的是，我们需要一段时间才能放弃回退:(

我提到的第一种方法是最安全和最简单的。两种方式都需要 Javascript 来隐藏图标。

CSS：

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML：

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

Javascript：

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

2013 年 9 月 25 日

我不敢相信我说过“两种方式都需要 JavaScript 来隐藏图标。”，因为这并不完全正确。

正如此答案中所建议的，隐藏占位符文本的最常见时间是更改。但是对于图标，可以将它们隐藏在焦点上，这可以在 CSS 中使用active伪类来完成。

#search:active { background-image: none; }

哎呀，使用 CSS3 你可以让它消失！

http://jsfiddle.net/2tTxE/

2013 年 11 月 5 日

当然，还有 CSS3 ::before 伪元素。但请注意浏览器支持！

            Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

于 2012-12-07T10:58:35.470 回答
9

`CSS：

input#search{
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
 text-indent: 20px;
}

input#search:focus{
 background-image:none;
}

HTML：

<input type="text" id="search" name="search" value="search" />`
于 2016-01-21T15:58:37.373 回答
3 
<html>
<head>
<style> 
input[type=text] {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>
于 2017-05-19T04:25:45.800 回答
0

我不知道随着时间的推移是否有更好的答案，但这很简单而且很有效；

input[type='email'] {
  background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
  background-image: none;
}

风格适合。

于 2017-07-03T15:17:24.450 回答
0

添加到蒂姆的答案：

  #search:placeholder-shown {
     // show background image, I like svg 
     // when using svg, do not use HEX for colour; you can use rbg/a instead
     // also notice the single quotes
     background-image url('data:image/svg+xml; utf8, <svg>... <g fill="grey"...</svg>')
     // other background props
   }

   #search:not(:placeholder-shown) { background-image: none;}
于 2019-05-09T08:21:57.437 回答