用于输入占位符的 HTML5 图像图标
Posted
技术标签:
【中文标题】用于输入占位符的 HTML5 图像图标【英文标题】：HTML5 image icon to input placeholder 【发布时间】：2012-11-25 13:07:23 【问题描述】：我想在输入占位符中添加一个图像图标，如下图所示：
请注意，这是一个占位符，所以当用户开始输入时，图标也会消失。
我使用::-webkit-input-placeholder 和::before 为webkit (Safari+Chrome) 提供了以下解决方案。不幸的是，简单的 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 */
【问题讨论】：
【参考方案1】：添加到蒂姆的答案：
#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;
【讨论】：
【参考方案2】：我不知道随着时间的推移是否有更好的答案，但这很简单而且很有效；
input[type='email']
background: white url(images/mail.svg) no-repeat ;
input[type='email']:focus
background-image: none;
风格适合。
【讨论】：
但是在开始输入时它应该会消失，而不是在焦点上。【参考方案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>
【讨论】：
【参考方案4】：`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" />`
【讨论】：
【参考方案5】：-
您可以将其设置为
background-image 并使用text-indent 或padding 将文本向右移动。
您可以将其分解为两个元素。
老实说，我会避免使用 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
【讨论】：
@Tim 有没有办法使用“Font Awesome”实现确切的效果？ @Robert 在某种程度上，是的。问题是您必须使用伪元素（:before 或:after），或者您必须添加额外的 DOM。为了使它们中的任何一个工作，该图标应该在:hover 而不是:focus 上可见，因为该图标不在输入元素中。查看demo。但是，使用 JavaScript，您可以激活焦点上的图标。随心所欲。
我认为在September 25h, 2013 更新中，您的示例代码是指#search:focus 而不是#search:active？！以上是关于用于输入占位符的 HTML5 图像图标的主要内容，如果未能解决你的问题，请参考以下文章