HTML5图像图标用作输入占位符

Question

HTML5图像图标用作输入占位符

csshtmlcross-browserplaceholder

27

我想在输入框的占位符中添加一个图片图标，就像这张图片中显示的一样： 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 */
}

- ecesena

5个回答

10

`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" />`

- Shumail Rafique

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>

- user8034508

0

我不知道随着时间的推移是否会有更好的答案，但这很简单并且有效；

input[type='email'] {
  background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
  background-image: none;
}

根据需要进行样式调整。

- Chris Pink

但是它应该在开始输入时消失，而不是在焦点上。 - Someone_who_likes_SE

0

补充Tim的回答：

  #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;}

- Sylar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim S. · Accepted Answer

你可以将其设置为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/zh-CN/docs/Web/CSS/::before