Eliminar el estilo completo de un botón HTML / enviar

94

¿Existe alguna forma de eliminar completamente el estilo de un botón en Internet Explorer? Utilizo un sprite CSS para mi botón y todo se ve bien.

Pero cuando hago clic en el botón, se mueve un poco hacia la parte superior, hace que parezca fuera de forma. ¿Hay un estado de clic CSS o mousedown? No sé qué desencadena ese estado.

Sé que no es gran cosa, pero a veces son las pequeñas cosas las que importan.

Saif Bechan
fuente

Respuestas:

71

Supongo que cuando dice ' haga clic en el botón, se mueve un poco hacia la parte superior ', está hablando del estado de clic del mouse hacia abajo para el botón, y que cuando suelta el clic del mouse, vuelve a su estado normal ? Y que está deshabilitando la representación predeterminada del botón usando:

input, button, submit { border:none; } 

Si es así..

Personalmente, descubrí que no se puede detener / anular / deshabilitar esta acción nativa de IE, lo que me llevó a cambiar un poco mi marcado para permitir este movimiento y no afectar el aspecto general del botón para los distintos estados.

Este es mi margen final:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

un darren
fuente
131

Creo que esto proporciona un enfoque más completo:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
<button>Example</button>

Kevin Leary
fuente
2
No creo que el trasfondo tenga un 'ninguno', y lo importante no es bueno.
Sheriffderek
4
Por lo general, cuando está haciendo esto, desea anular los estilos existentes que existen para un botón. Es raro que desee hacer esto con HTML limpio y sin estilo, de ahí el uso de !important. Dicho esto, lo eliminé porque es una decisión de situación. background: nonees completamente válido: stackoverflow.com/questions/20784292/…
Kevin Leary
A cada uno lo suyo en cuanto a! Importante. No creo que pudiera trabajar en un proyecto en el que me vi obligado a usarlo. RE: 'none' Aquí hay una referencia que es mejor que una publicación SO. Cuando usa 'background' por sí mismo, realmente está usando taquigrafía y golpeando todos los atributos.
Sheriffderek
Me estaba volviendo loco por la diferencia entre diseñar una imagen y un texto dentro de un botón y hacer que se vea igual que fuera de un <button/>... en mi caso, font: inherit;funcionó. ¡Gracias!
Kate
3
Creo que por motivos de accesibilidad probablemente desee dejar ese esquema allí. de lo contrario, cuando presiona la pestaña, no hay una indicación visual de dónde se encuentra. ¡Sin embargo, gran respuesta!
John Hooper
43

Su pregunta dice "Internet Explorer", pero para aquellos interesados ​​en otros navegadores, ahora puede usar all: unsetbotones para deshacerlos.

No funciona en IE o Edge 18, pero es compatible con todos los demás.

https://caniuse.com/#feat=css-all

Advertencia de color de Safari: configurar el texto colordel botón después de usarlo all: unsetpuede fallar en Safari 13.1, debido a un error en WebKit . (El error se solucionará en Safari 14 y posteriores). " all: unsetSe configura -webkit-text-fill-coloren negro y eso anula el color". Si necesita configurar el texto colordespués de usarlo all: unset, asegúrese de configurar tanto el colorcomo -webkit-text-fill-coloren el mismo color.

Advertencia de accesibilidad: por el bien de los usuarios que no están usando el puntero del mouse, asegúrese de volver a agregar algunos :focusestilos, por ejemplo, button:focus { outline: orange auto 5px }para la accesibilidad del teclado .

Y no lo olvide cursor: pointer. all: unsetelimina todos los estilos, incluido el cursor: pointer, que hace que el cursor del mouse parezca una mano que señala cuando se desplaza sobre el botón. Es casi seguro que quieras recuperar eso.

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}
<button>check it out</button>

Dan Fabulich
fuente
1
¡Gracias por esto!
Will Ediger
Esto no es recomendable por motivos de accesibilidad. Deberá volver a agregar todos los outlineestilos para el :focusestado del elemento, por ejemplo.
Devin
@Devin ¡Gran punto! Actualicé mi publicación con una sugerencia para volver a agregar un outlineestilo. (Pero no creo que haya nada más que debamos volver a agregar para ningún propósito. ¿Sabe de algo?)
Dan Fabulich
8

Intente quitar el borde de su botón:

input, button, submit
{
  border:none;
}
Sarfraz
fuente
4

En bootstrap 4 es más fácil. Puedes usar las clases: bg-transparentyborder-0

ValRob
fuente
+ shadow-nonepara mí y es suficiente. ¡Gracias!
Bachet
0

Creo que es el estado del botón "activo".

Midhat
fuente
Tiene que ser el estado activo, tienes razón +1 para eso. Pero no logré que funcione correctamente
Saif Bechan
"Creo" no es una respuesta.
shinzou