HTML - Borde que aparece al insertar una imagen en un boton de envio de formulario

   
Vista:

Borde que aparece al insertar una imagen en un boton de envio de formulario

Publicado por Gustavo (87 intervenciones) el 01/11/2013 00:22:55
Hola gente el tema es este, estaba estudiando formularios e hice un ejemplo con lo que aprendi hasta ahora cuando hice una imagen para el boton enviar y ponerla en dicho boton noto que al pulsar la imagen se crea un borde que esteticamente no me gusta como queda, se puede suprimir eso o cambiarlo de color para que no se note , intente cambiar el atributo alink de color , pero no funciono esto es otra cosa y con border solo le pongo otro borde permanente, esto es cuando se selecciona el boton.


les dejo el codigo para que lo vean:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
  <head>
    <title>Botón de envío personalizado</title>
  </head>
 
<body bgcolor="#007800">
 
<center><h2><font color="#FFFF00">Hoteles El Paraíso</font></h2></center>
<h3><font color="white">Sistema de reservas de habitaciones:</font></h3>
 
<form>
 
<p><font color="#FFFF00">Introduzca su nombre:</font><input type="text" name="nombre" size="30"></p>
<p><font color="#FFFF00">Introduzca una clave para su identificación (4 letras):</font><input type="password" name="clave" size="4" maxlength="4"></p>
<p><font color="#FFFF00">Tipo de habitación </font></p>
<p><input type="radio" name="tipoHabitacion" value="individual"><font color="#FFFF00">Individual</font> &nbsp;&nbsp;<input type="radio" name="tipoHabitacion" value="doble"><font color="#FFFF00">Doble</font></p>
<p><font color="#FFFF00">Opciones extra:</font></p>
<p><input type="checkbox" name="desayuno" checked><font color="#FFFF00">Desayuno en cama</font>&nbsp;&nbsp;<input type="checkbox" name="jakuzzi"><font color="#FFFF00">Jakuzzi</font>&nbsp;&nbsp;<input type="checkbox" name="climatizador"><font color="#FFFF00">Climatizador</font></p>
<br /><p><center><input type="image" name="envio"  src="http://i1177.photobucket.com/albums/x348/TANGO2013/Enviacuteeme4.png"></center></p>
 
 
</form>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Borde que aparece al insertar una imagen en un boton de envio de formulario

Publicado por xve (1178 intervenciones) el 01/11/2013 09:54:26
Hola Gustavo, he probado tu código con Chrome, y no he visto ningún borde al pulsar el botón...

Con que navegador lo estas probando?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Borde que aparece al insertar una imagen en un boton de envio de formulario

Publicado por Gustavo (87 intervenciones) el 01/11/2013 17:03:40
Con chrome , xve, con opera tambien lo hace ,se me hace un borde finito naranja cuando lo pulso.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Borde que aparece al insertar una imagen en un boton de envio de formulario

Publicado por Jose maria (31 intervenciones) el 02/11/2013 13:43:51
Prueba a corregir:
<input type="image" name="envio" src="http://i1177.photobucket.com/albums/x348/TANGO2013/Enviacuteeme4.png" style="outline:0px;">

En principio me lo corrige en Chrome y Opera (además de Safari y Firefox que inicialmente aparece sin borde al pulsar el input)

CSS3 también te permitiría hacer prácticamente el mismo input con estilos y sin imagen (color, tamaño, bordes redondeados, sombra interna y externa, ... ).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Borde que aparece al insertar una imagen en un boton de envio de formulario

Publicado por Gustavo (87 intervenciones) el 02/11/2013 21:46:55
ah ok gracias jose maría es que todavia no llego a estudiar css, recien estoy terminando html viejo con la parte de formularios y tengo que ver lo nuevo de html 5 pero guardo la informacion para cuando lo estudie , muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Borde que aparece al insertar una imagen en un boton de envio de formulario

Publicado por Lin (1 intervención) el 21/06/2014 00:51:43
gracias puse esto en mi botón y resolvió mi problema
style="outline:0px;"

Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar