jQuery UI comes with handy icons in a sprite image; see the themeroller.
I have an input element for which I want the clock icon (with class .ui-icon-clock) as background image. How do I have a background icon to an input?
Add a comment
|
3 Answers
just use an empty span and add the jQuery UI classes.
<span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" />
You have to override the display style to make it inline-block rather than block otherwise the input will be pushed to the next line.
Other than that, I'm not sure exactly what you're after when you say make the clock the background image.
4 Comments
BZink
You're right, but CSS best practices are an exercise for the reader. The answer identifies what it takes to display a jQuery icon. The
ui-icon and ui-icon-clock classes and making your html element take up space.
Mark E. Haase
-1 Best practices are for everybody. No reason not to put the best possible answer here.
lc.
@mehasse Perhaps a comment or side-note is in order here, but adding an additional class name and attached css will make this answer overly verbose IMHO.
You can do that with JQuery UI script.
JS:
$(function() {
$("input").button({
icons: {
primary: ".ui-icon-clock"
},
text: false
})
});
HTML:
<input>some text</input>
Comments
$( "span").css({
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location
background-position: -80px -112px;
});
1 Comment
Alon Eitan
you should donwload a jqueryui theme from jqueryui.com/themeroller Click on the Gallery tab at the ThemeRoller and choose the one you like