css - inicio - ¿Hay alguna manera de eliminar el borde negro de IEs alrededor del botón de enviar en formularios activos?
html ejemplo de login (18)
Estoy implementando un diseño que usa botones de envío personalizados. Son simplemente botones de color gris claro con un borde exterior ligeramente más oscuro:
input.button {
background: #eee;
border: 1px solid #ccc;
}
Esto se ve perfecto en Firefox, Safari y Opera. El problema es con Internet Explorer, tanto 6 como 7.
Como el formulario es el primero en la página, se cuenta como la forma principal y, por lo tanto, se activa desde el principio. El primer botón de envío en el formulario activo recibe un borde negro sólido en IE, para marcarlo como la acción principal.
Si apago los bordes, el borde extra negro en IE también se va. Estoy buscando una forma de mantener mis bordes normales, pero eliminé el contorno.
Al menos en IE7 puedes modelar el borde aunque no puedas eliminarlo (configúralo en ninguno). Entonces, ajuste el color del borde al mismo color que debería hacer su fondo.
.submitbutton {
background-color: #fff;
border: #fff dotted 1px;
}
si tu fondo es blanco
Bien, aquí hay una solución fea para que puedas sopesar ... Pon el botón en un <span> , activa el borde del botón y dale al borde al lapso.
IE es un poco dudoso acerca de los márgenes de los elementos de formulario, por lo que es posible que esto no funcione con precisión. Quizás darle al tramo el mismo fondo que el botón podría ayudar a ese respecto.
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background: #eee;
border:0;
}
y
<span class="button"><input type="button" name="..." value="Button"/></span>
Bueno, esto funciona aquí:
<html>
<head>
<style type="text/css">
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background:none;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<span class="button"><input type="button" name="..." value="Button"/></span>
</body>
</html>
Con la técnica de puertas correderas, usa dos spans dentro del button . Y elimine cualquier formateo en el button en su anulación de IE.
<button><span class="open">Search<span class="close"></span></span></button>
Creo que filter: chroma (color = # 000000); como metieron hace mucho tiempo es lo mejor que se puede aplicar en cierta clase. De lo contrario, tendrá que ir y aplicar una etiqueta adicional en cada botón que tenga si usa clases, por supuesto.
.buttonStyle {filter: chroma (color = # 000000); ANTECEDENTES-COLOR: # E5813C sólido; BORDER-BOTTOM: #cccccc 1px sólido; BORDER-LEFT: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px sólido; COLOR: # FF9900; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TAMAÑO DE FUENTE: 10px; PESO FUENTE: negrita; TEXTO-DECORACIÓN: ninguno; } ¡Eso lo hizo por mí!
Encontré una respuesta que me funciona en otro foro. Elimina el borde negro no deseado en ie6 y ie7. Es probable que algunos / muchos de ustedes no hayan colocado su entrada = "enviar" en las etiquetas de formulario. No lo pases por alto Me funcionó después de probar todo lo demás.
Si está utilizando un botón de envío, asegúrese de que esté dentro de un formulario y no solo un conjunto de campo:
<form><fieldset><input type="submit"></fieldset></form>
Esto va a funcionar:
input[type=button]
{
filter:chroma(color=#000000);
}
Esto funciona incluso con la etiqueta de button y, finalmente, puede usar de forma segura la propiedad background-image css.
Estoy construyendo sobre el ejemplo de @ nickmorss de usar filtros que realmente no funcionaron para mi situación ... Usar el filtro de resplandor me resultó mucho mejor.
<!--[if IE]>
<style type="text/css">
input[type="submit"], input[type="button"], button
{
border: none !important;
filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
height: 24px; /* I had to adjust the height from the original value */
}
</style>
<![endif]-->
La mejor solución que he encontrado, es mover el borde a un elemento de envoltura, como este:
<div class=''submit_button''><input type="submit" class="button"></div>
Con este CSS:
.submit_button { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }
El principal problema con esta solución es que el botón ahora es un elemento de bloque y debe ser de ancho fijo. Podríamos usar inline-block, excepto que Firefox2 no lo admite.
Cualquier mejor solución es bienvenida.
La respuesta correcta a esta pregunta es:
outline: none;
... funciona para IE y Chrome, en mi conocimiento.
No puedo comentar (todavía), así que tengo que agregar mi comentario de esta manera. Creo que el consejo del Sr. David Murdoch es el mejor para Opera ( here ). Dios mío, qué chica tan adorable tiene por cierto.
Probé su enfoque en Opera y logré básicamente duplicar las etiquetas de entrada de esta manera:
<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />
De esta forma, el primer elemento está oculto pero captura el foco de visualización que Opera le daría al segundo elemento de entrada. ¡QUIÉRALO!
Para mí, el código siguiente realmente funcionó.
<!--[if IE]>
<style type="text/css">
input[type=submit],input[type=reset],input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
</style>
<![endif]-->
Lo obtuve de @Mark''s answer de @Mark''s y lo cargué solo para IE.
Pude combinar la sugerencia de David Murdoch con algunos JQuery de modo que la corrección se aplicará automáticamente a todos los elementos de ''entrada: enviar'' en la página:
// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$(''<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />'')
.insertBefore("input:submit");
}
Puede incluir esto en una página maestra o equivalente, por lo que se aplica a todas las páginas de su sitio.
Funciona, pero se siente un poco mal, de alguna manera.
Sé que tengo casi 2 años de retraso en el juego, pero encontré otra solución (al menos para IE7).
Si agrega otro input type="submit" a su formulario antes de cualquier otro botón de enviar en el formulario, el problema desaparecerá. Ahora solo necesita ocultar este nuevo botón negro que absorbe los bordes.
Esto funciona para mí (el desbordamiento debe ser "automático"):
<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />
Nota: Estoy usando un doctype HTML5 ( <!doctype html> ).
Tuve este problema y lo resolví con un div alrededor del botón, lo mostré como un bloque y lo coloqué manualmente. los márgenes para los botones en IE y FF eran demasiado impredecibles y no había forma de que ambos estuvieran contentos. Mi botón de envío tenía que estar perfectamente alineado con la entrada, por lo que simplemente no funcionaría sin colocar los elementos como bloques.
Una solución hackosa podría ser usar un marcado como este:
<button><span>Go</span></button>
y aplique sus estilos de borde al elemento span.
add * border: none esto elimina el borde para IE6 e IE7, pero lo mantiene para los otros navegadores
si no desea agregar un contenedor a la entrada / botón, intente hacer esto. Como este es un CSS no válido, entonces sre es solo para IE. Tener el borde como para otros navegadores pero use el filtro: croma para IE ...
<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
trabajó para mi.