Foros del Web » Creando para Internet » CSS »

Redondear tags de formulario

Estas en el tema de Redondear tags de formulario en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/03/2008, 16:29
Avatar de hackteam  
Fecha de Ingreso: diciembre-2007
Mensajes: 67
Antigüedad: 10 años
Puntos: 0
Redondear tags de formulario

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?
  #2 (permalink)  
Antiguo 11/03/2008, 08:37
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Redondear tags de formulario

Utilizando un background con las esquinas redondeadas...
<input type="text" style="background: url('p.jpg');" />
  #3 (permalink)  
Antiguo 11/03/2008, 17:02
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Re: Redondear tags de formulario

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!
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
  #4 (permalink)  
Antiguo 11/03/2008, 18:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondear tags de formulario

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.
  #5 (permalink)  
Antiguo 12/03/2008, 09:01
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Re: Redondear tags de formulario

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!!!!
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
  #6 (permalink)  
Antiguo 12/03/2008, 09:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondear tags de formulario

¡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.
  #7 (permalink)  
Antiguo 12/03/2008, 09:47
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Re: Redondear tags de formulario

Cita:
Iniciado por Mikmoro Ver Mensaje
¡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!
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
  #8 (permalink)  
Antiguo 12/03/2008, 10:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondear tags de formulario

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.
  #9 (permalink)  
Antiguo 12/03/2008, 11:52
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Re: Redondear tags de formulario

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!
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
  #10 (permalink)  
Antiguo 12/03/2008, 12:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondear tags de formulario

Gracias. Es un placer.

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

Mikel.
  #11 (permalink)  
Antiguo 13/03/2008, 17:25
Avatar de hackteam  
Fecha de Ingreso: diciembre-2007
Mensajes: 67
Antigüedad: 10 años
Puntos: 0
Re: Redondear tags de formulario

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! :)
  #12 (permalink)  
Antiguo 13/03/2008, 18:58
Avatar de hackteam  
Fecha de Ingreso: diciembre-2007
Mensajes: 67
Antigüedad: 10 años
Puntos: 0
Re: Redondear tags de formulario

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! :)
  #13 (permalink)  
Antiguo 13/03/2008, 19:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Redondear tags de formulario


¿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.
  #14 (permalink)  
Antiguo 13/03/2008, 19:23
Avatar de hackteam  
Fecha de Ingreso: diciembre-2007
Mensajes: 67
Antigüedad: 10 años
Puntos: 0
Re: Redondear tags de formulario

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!
  #15 (permalink)  
Antiguo 21/10/2008, 18:01
Avatar de vITTY  
Fecha de Ingreso: enero-2006
Mensajes: 139
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Redondear tags de formulario

Muy bueno!
  #16 (permalink)  
Antiguo 20/05/2011, 17:37
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 14 años
Puntos: 4
Respuesta: Redondear tags de formulario

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

Si quieres que funcione en Safari y Chrome, debes agregar:
-webkit-border-radius:15px;
  #17 (permalink)  
Antiguo 05/12/2011, 06:52
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 14 años
Puntos: 4
Respuesta: Redondear tags de formulario

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.
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 17:46.