Inicio > Estilos CSS, Internet, Uncategorized > Cómo quitar los puntitos de los botones de enlace

Cómo quitar los puntitos de los botones de enlace

El problema que tiene muchos maquetadores cuando crean una nueva web es que cuando se crean los links/enlaces de neutra web aparecen unos puntos decorativos en los botones o en las imágenes. Esos puntitos molestos siempre los queremos quitar para ello utilizamos el siguiente código:

* {
     outline: none;
}
Pero si lo has intentado solucionar mediante este código en tu CSS habrás podido comprobar que no tiene ningún efecto en nuestros enlaces o botones.
Aunque no lo parezca, es posible eliminar o modificar los bordes de los estilos de los enlaces, aunque tan solo funciona en navegadores basados en Gecko, aunque puede que webkit realiza una función similar, el efecto que se realiza en IE no es eliminar el borde o puntitos como muchos lo llamamos ya que en IE pasa mas desapercibido que en otros navegadores como Firefox.
La forma de eliminar el borde mediante la propiedad mozilla psedo-class::-moz-focus-inner.  Con esto podemos modificar el foco (focus) del enlace o link para  eliminar el bordeado que se crea al clickar en el botón o imagen que realiza las veces de enlace.
Para conseguirlo incluiremos en nuestro CSS el siguiente código:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
        border: none;
}

En estas lineas lo que estamos indicando, es que le eliminemos los bordes del foco todos los inputs, ya sean de tipo, reset, button, submit, o file, sea cual sea el tipo de botón o input, le borramos el borde del foco, es decir cuando el cursor este sobre el botón, mediante el click del raton o tabulando el cursos hasta posicionarse sobre el botón.

Otra solución que mejora la accesibilidad de nuestra pagina, es utilizar otro tipo de pseudo-clase estandar par amodificar el foto aplicando algunos estilos CSS como el siguiente ejemplo:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
        border: 1px dotted transparent;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
         padding: 3px;
         border-color: #F3F3F3;
}

Para todo el tema de Accesibilidad, este ejemplo que aquí os explico no es muy amigable para las personas discapacitadas o que utilizan con regularidad el teclado para navegar. En muchos casos el diseño ha de estar en acorde con las normas de accesibilidad web aunque muchas veces se puede crear una excepción en la accesibilidad en beneficio del diseño.

Este metodo solo sirve para los botones si lo queremos para los links normales utilizaremos lo siguiente:

a {
     outline: 0;
}

Fuente : Karl Rixon

,
  1. 2 mayo 2013 a las 22:46

    We’re a bunch of volunteers and starting a brand new scheme in our community. Your web site offered us with valuable information to work on. You have done a formidable task and our whole community might be grateful to you.

  2. 10 abril 2013 a las 06:20

    I’d like to thank you for the efforts you have put in writing this blog. I am hoping to see the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has motivated me to get my own, personal site now😉

  3. Almi
    23 marzo 2013 a las 07:45

    No lo habia encontrado en ningun otro lado, me sirvio, Gracias.

  4. 1 diciembre 2012 a las 00:43

    pero a que te refieres? a que pongamos el codigo en lo del CSS o en la plantilla HTML? (me refiero a lo primero, lo del punto)

    gracias

    • 5 diciembre 2012 a las 17:30

      No entiendo muy bien lo que me preguntas pero intento responderte. El estilo has de colocarlo en el archivo .css o si lo colocas en la página php o html has de colocarlo como estilo entre las etiquetas

  5. Roberto
    22 agosto 2010 a las 10:12

    Muy bueno, funciona ok.😀

  6. Yo
    13 agosto 2010 a las 12:34

    Perfecto gracias!

  7. 20 mayo 2010 a las 04:38

    Funciona a la perfección. Ojala y no me de problemas a la hora de validar el css.

    Muchisimas gracias

  1. 18 octubre 2014 a las 23:17
  2. 12 octubre 2014 a las 01:02

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: