用于输入占位符的HTML5图像图标
ece*_*ena 20 css html5 cross-browser placeholder
我想在输入占位符中添加一个图像图标,如下图所示:
请注意,这是占位符,因此当用户开始输入时,图标也会消失.
我使用::-webkit-input-placeholder和来自webkit(Safari + Chrome)的以下解决方案::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 */
}
Tim*_* S. 56
- 您可以将其设置为
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来隐藏图标.",因为这不完全正确.
隐藏占位符文本的最常见时间是正在更改,如本答案中所示.对于图标,可以将它们隐藏在焦点上,这可以使用active伪类在CSS中完成.
#search:active { background-image: none; }
哎呀,使用CSS3可以让它逐渐消失!
2013年11月5日
当然,还有伪元素之前的CSS3 ::.请注意浏览器支持!
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
小智 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" />`
小智 5
<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>