HTML5图片图标以输入占位符 [英] HTML5 image icon to input placeholder

问题描述

我想为输入的预留位置新增图片图示，如下图所示：

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

我使用 :: - webkit-input-placeholder 和 ::为webkit（Safari + Chrome）提供以下解决方案之前。不幸的是，对mozilla的直接应用似乎不起作用。

所以我的问题是：是一个跨浏览器的解决方案，

$ b <$ p> myinput :: - webkit-input-placeholder :: before {
content：'';
position：absolute;
top：2px; / * adjust图标位置* /
left：0px;
width：14px; / *单个图标的大小* /
height：14px;
background-image：url（/ path / to / icons.png）; / *单个文件中的所有图标* /
background-repeat：no-repeat;
background-position：-48px 0px; / *右图标的位置* /
}


解决方案

1. 您可以将其设置为 background-image ，并使用 text-indent c> c>将文本向右移动。


2. 您可以将其分成两个元素。

老实说，我会避免使用HTML5 / CSS3 没有良好的后备。有太多的人使用旧的浏览器，不支持所有新的花哨的东西。这将需要一段时间，我们可以放弃后备，不幸的是：（

我提到的第一种方法是最安全和最简单的，两种方法都需要Javascript来隐藏图标。

$ b

CSS：

  input＃search {
 background-image：url（bg.jpg）; 
 background-repeat：no-repeat; 
 text-indent：20px; 
 } 
  

HTML：

$ b b

 < input type =textid =searchname =searchonchange =hideIcon （this）;value =search/> 
  

Javascript ：

  function hideIcon（self）{
 self.style.backgroundImage ='none'; 
} 
  

---

2013年9月25日

我不敢相信我说两种方式都需要JavaScript隐藏图标，因为这不完全正确。

隐藏占位符文本的最常见的时间是更改，如此答案中所建议的。对于图标，可以隐藏他们的焦点，这可以在CSS与活动伪类。

  #search：active {background-image：none; } 
  

Heck，使用CSS3可以让它淡出！

http://jsfiddle.net/2tTxE/

< hr>

2013年11月5日

当然，还有CSS3 :: before伪元素。谨防浏览器支持！

  Chrome Firefox IE Opera Safari 
：before ）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/ :: 之前

I'd like to add an image icon to an input placeholder, like in this picture:

Please note that this is a placeholder, so when the user starts typing, the icon also disappears.

I came with the following solution for webkit (Safari+Chrome) using ::-webkit-input-placeholder and ::before. Unfortunately, the straightforward application to mozilla seems not to work.

So my question is: is there a cross-browser solution to add an image icon to an input placeholder?

Solution for 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. You can set it as background-image and use text-indent or a padding to shift the text to the right.
2. You can break it up into two elements.

Honestly, I would avoid usage of HTML5/CSS3 without a good fallback. There are just too many people using old browsers that don't support all the new fancy stuff. It will take a while before we can drop the fallback, unfortunately :(

The first method I mentioned is the safest and easiest. Both ways requires Javascript to hide the icon.

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

---

September 25h, 2013

I can't believe I said "Both ways requires JavaScript to hide the icon.", because this is not entirely true.

The most common timing to hide placeholder text is on change, as suggested in this answer. For icons however it's okay to hide them on focus which can be done in CSS with the active pseudo-class.

#search:active { background-image: none; }

Heck, using CSS3 you can make it fade away!

http://jsfiddle.net/2tTxE/

---

November 5th, 2013

Of course, there's the CSS3 ::before pseudo-elements too. Beware of browser support though!

            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

这篇关于HTML5图片图标以输入占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！