使用jQuery UI图标

jQuery UI在精灵图像中带有方便的图标; 看到这个美丽的人 。

我有一个input元素，我想要的时钟图标（与类.ui-icon-clock ）作为背景图像。 如何为input背景图标？

Answer 1

只需使用一个空的跨度并添加jQuery UI类。

 <span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" /> 

你必须重写显示样式，使其内联块，而不是阻塞，否则input将被推到下一行。

除此之外，当你说把时钟作为背景图像时，我不确定你到底在想什么。

Answer 2

你可以用JQuery UI脚本来做到这一点。

JS：

 $(function() { $("input").button({ icons: { primary: ".ui-icon-clock" }, text: false }) }); 

HTML：

 <input>some text</input> 

见http://jqueryui.com/button/#icons

Answer 3

 $( "span").css({ width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); // change to correct location background-position: -80px -112px; });