我想将图像图标添加到输入占位符,如下图所示:
请注意,这是占位符,因此当用户开始输入时,图标也会消失。
我使用::-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 */
}
答案 0 :(得分:55)
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';
}
我无法相信我说“两种方式都需要JavaScript来隐藏图标。”,因为这并不完全正确。
隐藏占位符文本的最常见时机正在改变,如本答案所示。但是对于图标,可以将它们隐藏在焦点上,这可以使用active
伪类在CSS中完成。
#search:active { background-image: none; }
哎呀,使用CSS3可以让它逐渐消失!
当然,还有伪元素之前的CSS3 ::。请注意浏览器支持!
Chrome Firefox IE Opera Safari
:before (yes) 1.0 8.0 4 4.0
::before (yes) 1.5 9.0 7 4.0
答案 1 :(得分:7)
`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" />`
答案 2 :(得分:0)
<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>
答案 3 :(得分:0)
我不知道随着时间的推移是否有更好的答案,但这很简单并且有效;
input[type='email'] {
background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
background-image: none;
}
设计它以适应。
答案 4 :(得分: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;}