用于输入占位符的HTML5图像图标

时间:2012-12-07 10:54:19

标签: css html5 cross-browser placeholder

我想将图像图标添加到输入占位符,如下图所示: enter image description here

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

我使用::-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 */
}

5 个答案:

答案 0 :(得分:55)

  1. 您可以将其设置为background-image并使用text-indentpadding将文字向右移动。
  2. 您可以将其分解为两个元素。
  3. 老实说,我会避免使用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可以让它逐渐消失!

    http://jsfiddle.net/2tTxE/


    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

答案 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;}