CSS: Implementando CSS Sprites con imagen de botón de entrada

Este botón está antes de CSS Sprites

<input type="image" src="/images/search-button.png" value="" id="search-button">

Estoy tratando de implementar CSS Sprites con uno de mis formularios de búsqueda y el problema es que si uso

<input id="search-button" class="sprites1" type="submit" value="">

Se verá algo como esto.

enter image description here

Como puede ver, la imagen de la derecha no se ve bien, pero se puede hacer clic en ella.

Entonces probé con

<span id="search-button" class="sprites1"></span>

enter image description here

¡Entonces se ve bien! ¡¡Pero!! No puedo hacer clic en él.

Así que aquí está mi código de sprites CSS.

¿Qué tengo que implementar para que se vea como yo quiero y pueda hacer clic en él?

 .sprites1 {
        background: url('result.png');
    }
#search-button {background-position: -0px -462px; 

                width:16px; height:16px; float:right; }

preguntado el 01 de mayo de 12 a las 22:05

1 Respuestas

El problema aquí es el css predeterminado que usa el navegador en los elementos. Deberías intentar restablecer ese css. A menudo uso el siguiente fragmento:

/*  reset css of buttons */
.cssresetbutton {
    border-width: 0px;
    border-style: none;
    background: inherit;
    font: inherit;
    color: blue;
    padding: 0px; }

.cssresetbutton:active {
    border-width: 0px;
    border-style: none;
    background: inherit;
    outline: 0;
    box-shadow: none; }

intente agregar el cssresetbutton class a su elemento de entrada y vea si funciona.

EDIT: También puede intentar no usar un elemento input[type=submit]. Por ejemplo:

<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>

Enviará el elemento form#formid cuando se haga clic.

contestado el 01 de mayo de 12 a las 23:05

¿Lo estás insertando ANTES de la clase sprites1? como clase="cssresetbutton sprites1". Hace la diferencia. - FRD

antes, como esta class="cssresetbutton sprites1". Déjame saber si funciona. - FRD

Hmm... ¿puedes explicarme por qué la "posición de fondo: -0px -462px;"? ¿Por qué 462px? ¿Puedes intentar eliminarlo (manteniendo la clase cssresetbutton)? ¿A ver si cambia algo? - FRD

Intente no usar un elemento de entrada. Por ejemplo: . Cuando hace clic en él, debería funcionar como un elemento de entrada [tipo = enviar], tratando de enviar el formulario relacionado. A ver si eso funciona. - FRD

¿Quiere decir que el cursor no aparece como esa mano que hace clic (o algo así)? eso es simple: agregue 'cursor: puntero' al css #search-button. O, en línea: - FRD

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.