Quitar borde de botones

109

Intenté crear botones e insertar mis propias imágenes en lugar de las imágenes de botones estándar. Sin embargo, el borde gris de los botones estándar aún permanece, mostrándose en el exterior de las imágenes de mis botones negros.

¿Alguien sabe cómo eliminar este borde gris del botón, por lo que es solo la imagen en sí? Gracias.

html css button

— JamesonW
fuente

Prueba -webkit-appearance: inherit;o-webkit-appearance:initial

— Max

1

@Brut: Puede que me equivoque, pero eso me parece específico del navegador, y estoy bastante seguro de que Jameson quiere algo que funcione para todos los navegadores modernos.

— Michael Scheper

185

Añadir

padding: 0;
border: none;
background: none;

a tus botones.

Manifestación:

https://jsfiddle.net/Vestride/dkr9b/

— Vestride
fuente

Te lo agradezco ... pero agregué lo que dijiste a la hoja de estilo y desafortunadamente no funcionó. ¿Debería incrustarlo directamente en el html, si eso marcaría la diferencia?

— JamesonW

Agregué un violín más background: none;a los botones. Eche un vistazo al violín y vea si eso funciona para usted.

— Vestride

37

Esto parece funcionarme perfectamente.

button:focus { outline: none; }

— Daniel Lee
fuente

4

outline:none;no se recomienda por razones de accesibilidad. Si debe eliminar el borde de enfoque, proporcione otra forma para que los usuarios vean que tiene el enfoque. outlinenone.com

— Vestride

9

Estaba teniendo el mismo problema y, aunque estaba diseñando mi botón en CSS, nunca captaría el, border:nonepero lo que funcionó fue agregar un estilo directamente en el botón de entrada de esta manera:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>

— Pulga
fuente

está utilizando la cascada de CSS para anular la propiedad con un estilo en línea. Debería consultar algunos artículos sobre la cascada CSS y la especificidad de CSS.

— DrCord

2

Intente usar: border:0;oborder:none;

— Felipe Manuel
fuente

1

El truco habitual consiste en hacer que la imagen sea parte de un enlace en lugar de un botón. Luego, vincula el evento "click" con un controlador personalizado.

Los marcos como Jquery-UI o Bootstrap hacen esto de inmediato. Por cierto, usar uno de ellos puede facilitar mucho la concepción de la aplicación.

— yadutaf
fuente

1

También puedes probar background:none;border:0pxcon los botones.

también los selectores css son div#yes button{..}y div#no button{..}. espera que ayude

También puede establecer el fondo del botón como imágenes, en lugar de usar etiquetas img

O hacerlo en css puro. me gustabackground:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

Para eliminar el 'borde azul' predeterminado del botón en el enfoque del botón:

En Html:

<button class="new-button">New Button...</button>

Y en CSS

button.new-button:focus {
    outline: none;
}

Espero eso ayude :)

— Kailas
fuente

0

Agregue esto como css,

button[type=submit]{border:none;}

— usuario8826621
fuente

-3

$ (". myButtonClass"). css (["borde: ninguno; color de fondo: blanco; relleno: 0"]);

— KenDev
fuente

3

Jajaja, no deberías usar jquery para un cambio de estilo CSS

— zardilior