Html 用于输入占位符的 HTML5 图像图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13761654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 image icon to input placeholder
提问by ecesena
I'd like to add an image icon to an input placeholder, like in this picture:
我想将图像图标添加到输入占位符，如下图所示：
Please note that this is a placeholder, so when the user starts typing, the icon also disappears.
请注意，这是一个占位符，因此当用户开始输入时，该图标也会消失。
I came with the following solution for webkit (Safari+Chrome) using ::-webkit-input-placeholderand ::before. Unfortunately, the straightforward application to mozilla seems not to work.
我为 webkit (Safari+Chrome) 使用::-webkit-input-placeholder和提供了以下解决方案::before。不幸的是，对 mozilla 的直接应用似乎不起作用。
So my question is: is there a cross-browser solution to add an image icon to an input placeholder?
所以我的问题是：是否有跨浏览器解决方案可以将图像图标添加到输入占位符？
Solution for webkit:
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 */
}
回答by Tim S.
- You can set it as
background-imageand usetext-indentor apaddingto shift the text to the right. - You can break it up into two elements.
- 您可以将其设置为
background-image并使用text-indent或 apadding将文本向右移动。 - 您可以将其分解为两个元素。
Honestly, I would avoid usage of HTML5/CSS3 without a good fallback. There are just too many people using old browsers that don't support all the new fancy stuff. It will take a while before we can drop the fallback, unfortunately :(
老实说，如果没有一个好的回退，我会避免使用 HTML5/CSS3 。有太多人在使用不支持所有新奇事物的旧浏览器。不幸的是，我们还需要一段时间才能放弃回退:(
The first method I mentioned is the safest and easiest. Both ways requires Javascript to hide the icon.
我提到的第一种方法是最安全和最简单的。这两种方式都需要 Javascript 来隐藏图标。
CSS:
CSS：
input#search {
background-image: url(bg.jpg);
background-repeat: no-repeat;
text-indent: 20px;
}
HTML:
HTML：
<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />
Javascript:
Javascript：
function hideIcon(self) {
self.style.backgroundImage = 'none';
}
September 25h, 2013
2013 年 9 月 25 日
I can't believe I said "Both ways requires JavaScript to hide the icon.", because this is not entirely true.
我不敢相信我说“两种方式都需要 JavaScript 来隐藏图标。”，因为这并不完全正确。
The most common timing to hide placeholder text is on change, as suggested in this answer. For icons however it's okay to hide them on focus which can be done in CSS with the activepseudo-class.
正如此答案中所建议的那样，隐藏占位符文本的最常见时机是更改。但是对于图标，可以将它们隐藏在焦点上，这可以在 CSS 中使用active伪类完成。
#search:active { background-image: none; }
Heck, using CSS3 you can make it fade away!
哎呀，使用 CSS3 你可以让它消失！
November 5th, 2013
2013 年 11 月 5 日
Of course, there's the CSS3 ::before pseudo-elements too. Beware of browser support though!
当然，还有 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
回答by shumail rafique
`CSS:
`CSS：
input#search{
background-image: url(bg.jpg);
background-repeat: no-repeat;
text-indent: 20px;
}
input#search:focus{
background-image:none;
}
HTML:
HTML：
<input type="text" id="search" name="search" value="search" />`
回答by user8034508
<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>
回答by Chris Pink
I don't know whether there's a better answer out there as time goes by but this is simple and it works;
我不知道随着时间的推移是否有更好的答案，但这很简单，而且很有效；
input[type='email'] {
background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
background-image: none;
}
Style it up to suit.
风格它适合。
回答by Sylar
Adding to Tim's answer:
添加到蒂姆的答案：
#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;}
