HTML5图片图标以输入占位符

本文介绍了HTML5图片图标以输入占位符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想为输入的预留位置新增图片图示，如下图所示： 请注意，这是一个占位符，因此当用户开始输入时，图标也会消失。 我使用 c> c>将文本向右移动。 您可以将其分成两个元素。 老实说，我会避免使用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/ 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 */} 解决方案You can set it as background-image and use text-indent or a padding to shift the text to the right.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, 2013I 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, 2013Of 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.0https://developer.mozilla.org/en-US/docs/Web/CSS/::before 这篇关于HTML5图片图标以输入占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！