jQuery UI viene con todos los iconos en una imagen de sprite; véase la themeroller.

Tengo una input elemento para el que quiero que el icono del reloj (con la clase .ui-icon-clock) como imagen de fondo. ¿Cómo puedo tener un icono de fondo a un input?

InformationsquelleAutor Randomblue | 2011-09-03

3 Comentarios

  1. 51

    sólo utilizar un vacío de span y agregar la interfaz de usuario jQuery clases.

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

    Tiene que reemplazar el estilo de visualización para hacer inline-block en lugar de bloque de lo contrario, la entrada será empujado a la línea siguiente.

    Aparte de eso, no estoy seguro exactamente lo que está después cuando dices hacer que el reloj de la imagen de fondo.

    • Es esta realmente la respuesta correcta? Pensé explícitamente la definición de estilos en html se desaconseja encarecidamente, como la fusión de los «contenidos» y «mostrar» preocupaciones.
    • Tienes razón, pero CSS mejores prácticas son un ejercicio para el lector. La respuesta identifica lo que se necesita para mostrar un jQuery icono. El ui-icon y ui-icon-clock clases y hacer que su elemento html ocupan espacio.
    • -1 son las Mejores prácticas para todo el mundo. No hay razón para no poner la mejor respuesta posible aquí.
    • Tal vez un comentario o nota al margen está en orden aquí, pero añadir un nombre de clase y css adjunta hará esta respuesta excesivamente detallado en mi humilde opinión.
  2. 2
    $( "span").css({ 
    width: 16px; 
    height: 16px; 
    background-image: url(images/ui-icons_222222_256x240.png); //change to correct location
    background-position: -80px -112px; 
    });
    • usted debe descargar una jqueryui tema de jqueryui.com/themeroller haga Clic en la ficha Galería en la ThemeRoller y elegir el que más te guste

Dejar respuesta

Please enter your comment!
Please enter your name here