Redondear tags de formulario

hackteam · #1 (**permalink**) 10/03/2008, 15:29

Hola a todos, existe alguna manera, de contornear los inputs de un formulario mediante css? es decir que no parezcan tan cuadradas, y sean mas vistosos, hay alguna manera, o forma para realizar esto por css?

Raulmmmm · #2 (**permalink**) 11/03/2008, 07:37

Utilizando un background con las esquinas redondeadas...
<input type="text" style="background: url('p.jpg');" />

Saruman · #3 (**permalink**) 11/03/2008, 16:02

Hol, tengo la misma situación.
con respecto a la respuesta de "Raulmmmm" no me parece creativa tu idea amigo. Yo más bien estaba pensando en una forma de poder utilizar el input a cualquier ancho, porque si hago de la forma en que lo planteas entonces me OBLIGA a hacer los inputs del mismo tamaño y eso como que no....

bueno, se me ocurría algo así (ver link abajo)

http://www.icamos.com/clientes/aadevelopers/example/

usar dos div, uno para el borde redonde de la izquierda y el otro para el de la derecha y así el input puede tomar cualquier ancho.

la cuestión es que no soy muy experto en CSS por lo que vengo por ak para que me asesoren en esto, ya que también necesito de esto. Revisen el codigo fuente del link y diganme que tengo mal que no sale como debe ser, si tienen un mejor forma de hacerlo por favor no duden en decírmela.

saludos y espero nos ayuden a mi y a hackteam a resolver nuestras dudas.

Gracias!

Mikmoro · #4 (**permalink**) 11/03/2008, 17:02

Creo que así viene a ser más sencillo. A ver si os sirve.

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Example</title>

<style type="text/css">
input { border-style: solid none;
border-color: rgb(149, 149, 149) -moz-use-text-color;
border-width: 1px 0px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: rgb(66, 66, 66);
background-color: rgb(255, 255, 255);
font-weight: normal;
background-image: url(input_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 20px;
padding-top: 2px;
padding-left: 2px;
}
.inputleft { width: 4px;
height: 20px;
background-image: url(input_cornet1.png);
background-repeat: no-repeat;
float: left;
}
.inputright { height: 20px;
background-image: url(input_cornet2.png);
background-repeat: no-repeat;
background-position: right top;
width: 4px;
float: right;
}
#boton {
width: 225px;
}
</style>
</head>

<body>
<div id="boton">
<div class="inputright"></div>
<div class="inputleft"></div>
<input name="usuario" id="usuario" maxlength="50" size="38" type="text"></div>
</body>
</html>

Mikel.

Saruman · #5 (**permalink**) 12/03/2008, 08:01

Que tal Mikmoro. Gracias por responder.
Mira, está perfecto lo que hiciste pero hay un detalle, no funciona para internet explorer. funciona perfectamente en firefox, opera y safari, pero casualidad que en Internet Fucker no.... ese detalle se me paso decirlo en el post anterior y me disculpo, voy a seguri investigando, por favor, si puedes colaborar con eso te lo agradecería un montón.

Saludos!!!!

Mikmoro · #6 (**permalink**) 12/03/2008, 08:31

¡Ni lo pensé, ni me molesté en mirarlo

!

En realidad es fácil (para IE6, que el 7 no lo tengo ahora disponible):

- Cambias el selector #boton por este otro:

#boton {
width: 225px!important;
width: 224px;
}

- Añades float: left; en el selector input.

Pero lo cierto es que hay una mejor manera de hacerlo. En cuanto pueda te lo miro.

Mikel.

Saruman · #7 (**permalink**) 12/03/2008, 08:47

Cita:

Iniciado por Mikmoro

¡Ni lo pensé, ni me molesté en mirarlo

!

En realidad es fácil (para IE6, que el 7 no lo tengo ahora disponible):

- Cambias el selector #boton por este otro:

#boton {
width: 225px!important;
width: 224px;
}

- Añades float: left; en el selector input.

Pero lo cierto es que hay una mejor manera de hacerlo. En cuanto pueda te lo miro.

Mikel.

Gracias de nuevo, una consulta... para que sirve eso de !important??? lo he visto siempre por alli pero no se que quiere decir exactamente, asumo que es el valor default que debe tomar, sino, el otro, pero como y cuando se toma X valor...

BTW, si, debe haber una mejor forma de hacer todo esto....

Saludos y gracias d nuevo!

Mikmoro · #8 (**permalink**) 12/03/2008, 09:33

Esta manera es algo más limpia, funciona bien en IE6, IE7 y FF, y se corren menos riesgos con la anchura variable del input:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Example</title>

<style type="text/css">
input { border-style: solid none;
border-color: rgb(149, 149, 149) -moz-use-text-color;
border-width: 1px 0px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: rgb(66, 66, 66);
background-color: rgb(255, 255, 255);
font-weight: normal;
background-image: url(input_bg.jpg);
background-repeat: repeat-x;
background-position: center top;
height: 20px;
padding-top: 2px;
padding-left: 2px;
float: left;
}
.inputleft, .inputright {width: 4px;
height: 20px;
background-repeat: no-repeat;
float: left;
}
.inputleft {
background-image: url(input_cornet1.png);
}
.inputright {
background-image: url(input_cornet2.png);
}
</style>
</head>

<body>
<span id="boton">
<div class="inputleft"></div>
<input name="usuario" id="usuario" maxlength="50" size="38" type="text">
<div class="inputright"></div>
</span>
</body>
</html>

Y además sin trucos para explorer

.

Lo de important es que esa norma prevalece sobre cualquier otra del mismo tipo, pero IE6 no lo entiende, así que:

margin: 10px!important;
margin: 20px;

significa: FF lee 10px por el important, mientras que IE6 lee 20px, porque está después (atiende a la última declaración), y no entiende el important.
Saludos.

Mikel.

Saruman · #9 (**permalink**) 12/03/2008, 10:52

Super cool dude!!! I'm impressed!

Gracias mil por ayudarme en esto y por la explicación del !important.

Cualquier cosa sobre PHP ya sabes donde preguntar!!

Saludos!

Mikmoro · #10 (**permalink**) 12/03/2008, 11:37

Gracias. Es un placer.

Pues no me vendrá mal, porque a veces con PHP me las veo canutas

Mikel.

hackteam · #11 (**permalink**) 13/03/2008, 16:25

jamas crei que generara tanto revuelo mi pregunta :$ gracias a todos por responder, mirare cual es la respuesta correcta asi la posteo despues para cerrar el tema! :)

hackteam · #12 (**permalink**) 13/03/2008, 17:58

JOjojoJOjojOJojoJOjO Lo resolvi de una forma mucho mas sencilla :)

.redondear{
-moz-border-radius: 15px;
background-color: rgb(255, 255, 255);
border : 1px solid #000000;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
padding-left : 5px;
padding-right : 5px;
}

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Example</title>

<style type="text/css">

.redondear{
-moz-border-radius: 15px;
background-color: rgb(255, 255, 255);
border : 1px solid #000000;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
padding-left : 5px;
padding-right : 5px;
}
</style>
</head>

<body>
<span id="boton">
<div class="inputleft"></div>
<input name="usuario" class="redondear" maxlength="50" size="38" type="text">
<div class="inputright"></div>
</span>
<br>
</body>
</html>

GRACIAS! un saludo gracias por contestar! :)

Mikmoro · #13 (**permalink**) 13/03/2008, 18:05

¿Lo has mirado con IE6?

Aquí oirás mucho decir que qué sencila sería la vida del diseñador web si no existieran IE6 y anteriores.

Mikel.

hackteam · #14 (**permalink**) 13/03/2008, 18:23

wuaaaaaaaaaaaaajajajajaja, ahora tendre que hacer una campaña contra el fucken explorer jajajajajaja, bueno que mas da, cambiare el fondo de los form algo de borde y sha esta :) jajajaja saludos!

vITTY · #15 (**permalink**) 21/10/2008, 17:01

Muy bueno!

florlangosta · #16 (**permalink**) 20/05/2011, 16:37

-moz-border-radius: 15px;
Solo funciona para Firefox.

Si quieres que funcione en Safari y Chrome, debes agregar:
-webkit-border-radius:15px;

florlangosta · #17 (**permalink**) 05/12/2011, 06:52

Aqui les dejo la solucion para IE 7, 8 etc etc.

La solución incluye algo de JavaScript.
Debes descargarte el archivo border.htc, que esta comprimido en un ZIP en el siguiente enlace:

> Descargar archivo border.htc <

Lo descomprimes en el mismo directorio donde tienes los archivos HTML que estás utiizando.
Luego, a la clase CSS debes agregarle la siguiente linea:

behavior:url(border.htc);

Y listo!!
Funciona en Internet Explorer.