Quitar borde del cuadro de texto de un formulario

mferna · #1 (**permalink**) 10/06/2012, 10:14

Hola!! Aquí os dejo el formulario que estoy haciendo, el tema es que me gustaría que sólo quedara la imagen que aparece en cada cuadro de texto del formulario que sobresale un poco del cuadro predefinido que te crea el formulario.

Yo quisiera quitar esos bordes grises de cada cuadro para que sólo quede la imagen esa que he puesto como fondo de la caja de texto.

Aquí os dejo la web: http://xabierlopez.com/blog/?page_id=95

¿Cómo lo puedo solucionar?

furoya · #2 (**permalink**) 10/06/2012, 12:20

Este asunto lo veo muy seguido en el Foro. ¿En qué navegador no funciona border-width: 0;?.
Creo que lo más lógico, que es border: none, no andaba en IE, pero colapsar el grosor o pintarlo como el fondo deberían servir.

¿Alguien puede explicar exactamente dónde está el drama?

emprear · #3 (**permalink**) 10/06/2012, 22:00

Es un html medio caótico, te sugiero que solo para esa página (la que contiene el form) agregues
<style type="text/css">
input{
margin-top: 5px;}
</style>
a continuación de cualquier otro css, para que la imagen se muestre completa

SAludos

furoya · #4 (**permalink**) 15/06/2012, 09:28

Bueno. A mi nadie me contesta.

Estaba esperando un poco la respuesta de mferna. Y se me pasó el tiempo. Recién miré la página y vi que ya lo arregló, o lo parchó. No voy a mirar porque sufro cuando encuentro esos HTML.

Volviendo al tema del "borde" ¿esto funciona?

Código:

<html>
<head>
<style type="text/css">
form {background-color: silver; }
table {text-align: center; font-weight: 900; font-size: 26px; color: navy; min-width: 50%; 
background-image: url(http://img651.imageshack.us/img651/9528/marmol2in.gif); margin: auto; }
input {margin: 26px; width: 150px; border: none; border-width: 0; 
background-color: transparent; outline: none; }
input:focus {outline: 2px dotted navy; }
.dato {background-color: transparent; padding: 10px; border-radius: 10px; 
background-image: url(http://img16.imageshack.us/img16/2408/semitrans017oh.png); }
</style>
</head>
<body>
<form>
<table>
<tr><td>Campo 01<br>
<span class=dato><input type=text size=10></span></td>
<td>Campo 02<br>
<span class=dato><input type=text></span></td>
</tr><tr><td>Campo 03<br>
<span class=dato><input type=text></span></td>
<td>Campo 04<br>
<span class=dato><input type=text></span></td>
</tr></table>
</body>
</html>

El borde con el foco de input ya sé que no anda en versiones viejas de IE. Y las esquinas redondas tampoco, pero en el pedido original éstas eran una imagen.
Me olvidé de eso, también podía haberlo incluído en el ejemplo, pero ya fue.