Foros del Web » Creando para Internet » CSS »

Button sin borde

Estas en el tema de Button sin borde en el foro de CSS en Foros del Web. Wenas. Tengo declarados unos estilos para los botones, pero quisiera quitar el recuadro que le pone el IE al hacer click sobre estos. ¿Se puede ...
  #1 (permalink)  
Antiguo 08/03/2010, 03:46
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Pregunta Button sin borde

Wenas.

Tengo declarados unos estilos para los botones, pero quisiera quitar el recuadro que le pone el IE al hacer click sobre estos.

¿Se puede hacer?

THX
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #2 (permalink)  
Antiguo 08/03/2010, 04:09
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Button sin borde

te refieres al enfoque del teclado? Quieres deshabilitar el teclado? O mejor dicho, hacer invisible lo que selecciona el usuario? con outline:none; lo consigues :P
  #3 (permalink)  
Antiguo 08/03/2010, 04:19
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Respuesta: Button sin borde

Cita:
Iniciado por patrick_ Ver Mensaje
te refieres al enfoque del teclado? Quieres deshabilitar el teclado? O mejor dicho, hacer invisible lo que selecciona el usuario? con outline:none; lo consigues :P
Hola.

Puuuues va a ser que no. Ya lo probé.

Lo que yo quiero es que al hacer click en el botón, ese recuadro que se le pone, pues que no aparezca.

He probado con IE6 y 7, y en los dos ocurre lo mismo.

THX
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #4 (permalink)  
Antiguo 08/03/2010, 04:40
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Button sin borde

puedes poner el estilo del boton?
  #5 (permalink)  
Antiguo 08/03/2010, 04:51
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Respuesta: Button sin borde

Cita:
Iniciado por patrick_ Ver Mensaje
puedes poner el estilo del boton?
Código:
table.TablaCriterioBusqueda {clear:both;width:100%;margin:0.3em 0 1em 0; color: #3E5E8D;}

table.TablaCriterioBusqueda td input {font-family:arial, tahoma, helvetica, verdana, sans-serif;font-size:0.9em;border:1px solid #dedede;}

table.TablaCriterioBusqueda td input.BotonLimpiarFondoGris {
	background-color:#a5bc00;
	color:#fff;
	border-top:3px solid #fff;
	border-right:3px solid #fff;
	border-bottom:3px solid #cecece;
	border-left:3px solid #cecece;
	cursor:pointer;
	font-weight:bold;
	padding:0.2em 0;
	outline:none;
}
La clase "final" que aplicamos al input button es BotonLimpiarFondoGris .
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #6 (permalink)  
Antiguo 08/03/2010, 07:18
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Button sin borde

tienes que añadir:
table.TablaCriterioBusqueda td input:focus { outline:none; }
  #7 (permalink)  
Antiguo 08/03/2010, 07:54
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Respuesta: Button sin borde

Cita:
Iniciado por patrick_ Ver Mensaje
tienes que añadir:
table.TablaCriterioBusqueda td input:focus { outline:none; }
Es buena idea ... yo no lo había probado así .... pero no funciona
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #8 (permalink)  
Antiguo 08/03/2010, 08:13
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Button sin borde

-- tambien puedes probar :active envez de :focus, pero a mi me funciona con :focus

puedes hacer una captura para mostrar a que borde te refieres? Porque el outline desaparece haciendo esto.
  #9 (permalink)  
Antiguo 08/03/2010, 09:47
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Respuesta: Button sin borde

Cita:
Iniciado por patrick_ Ver Mensaje
-- tambien puedes probar :active envez de :focus, pero a mi me funciona con :focus

puedes hacer una captura para mostrar a que borde te refieres? Porque el outline desaparece haciendo esto.
No puedo adjuntar archivos y no tengo acceso a páginas como megaupload, etc.

Es un borde que se pone al hacer click en el botón y además, alrededor del propio border que defino en el CSS
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #10 (permalink)  
Antiguo 08/03/2010, 10:25
 
Fecha de Ingreso: septiembre-2007
Ubicación: Barcelona
Mensajes: 227
Antigüedad: 10 años, 3 meses
Puntos: 12
Respuesta: Button sin borde

acabo de recordar que IE6/7 no soportan outline en CSS. por lo tanto tienes que usar javascript, aunque personalmente diria que para un detalle asi es mejor ignorar a IE6/7. A fin de cuentas, no afecta al funcionamiento de la pagina. De hecho, ni siquiere afecta al layout.
  #11 (permalink)  
Antiguo 08/03/2010, 11:15
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Button sin borde

patrick_
Cita:
acabo de recordar que IE6/7 no soportan outline en CSS
llevas razon... y no... ya que como no lo soporta pues por obvias razones no lo muestra...

solo con
input{outline:0 none;}
te debe valer, pero en FF hay un bug que en los input no los remueve...
https://bugzilla.mozilla.org/show_bug.cgi?id=74225
y necesitas la pseudo clase ::-moz-focus-inner que no valida por desgracia...
pero funciona...
  #12 (permalink)  
Antiguo 09/03/2010, 01:28
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Respuesta: Button sin borde

Cita:
Iniciado por patrick_ Ver Mensaje
acabo de recordar que IE6/7 no soportan outline en CSS. por lo tanto tienes que usar javascript, aunque personalmente diria que para un detalle asi es mejor ignorar a IE6/7. A fin de cuentas, no afecta al funcionamiento de la pagina. De hecho, ni siquiere afecta al layout.
Es verdad ... no tiene ninguna funcionalmente hablando ... pero visualmente queda mal mal.
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #13 (permalink)  
Antiguo 09/03/2010, 01:33
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Respuesta: Button sin borde

Cita:
Iniciado por alexk Ver Mensaje
patrick_


llevas razon... y no... ya que como no lo soporta pues por obvias razones no lo muestra...

solo con
input{outline:0 none;}
te debe valer, pero en FF hay un bug que en los input no los remueve...
https://bugzilla.mozilla.org/show_bug.cgi?id=74225
y necesitas la pseudo clase ::-moz-focus-inner que no valida por desgracia...
pero funciona...
No necesito que funcione en FF, pero es que en ID tampoco funciona . he hecho esto
Código:
table.TablaCriterioBusqueda td input.BotonLimpiarFondoGris::-moz-focus-inner {border: 0}
Y también he aplicado el input{outline:0 none;}, por probar ... y nada .
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender
  #14 (permalink)  
Antiguo 10/03/2010, 06:00
Avatar de fjmasero  
Fecha de Ingreso: diciembre-2002
Mensajes: 488
Antigüedad: 15 años
Puntos: 1
Respuesta: Button sin borde

Bueno, después de mucho investigar, y preguntar .... parace que para IE no hay solución.

Es el borde que se muestra al coger el foco el input button ... y es lo que hay.

De todas formas, si alguién tiene alguna otra idea......
__________________
No es sabio el que sabe sino el que no sabe y quiere aprender

Etiquetas: bordes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:56.