Foros del Web » Creando para Internet » CSS »

Redondear campo de texto

Estas en el tema de Redondear campo de texto en el foro de CSS en Foros del Web. Hola a todos... estoy intentando redondear los bordes de un campo de texto y de un botón (se trata de un buscador interno) y no ...
  #1 (permalink)  
Antiguo 13/03/2011, 20:14
Avatar de Gambinoh  
Fecha de Ingreso: diciembre-2010
Mensajes: 348
Antigüedad: 7 años
Puntos: 11
Redondear campo de texto

Hola a todos... estoy intentando redondear los bordes de un campo de texto y de un botón (se trata de un buscador interno) y no lo consigo.

Código CSS:
Ver original
  1. #formbuscar {
  2. position: relative;
  3. top: 5px;
  4. left: 10px;  
  5. border: 5px solid black;
  6. width: 150px;
  7. height: 25px;
  8. -webkit-border-radius: 4px;
  9. -moz-border-radius: 4px;
  10. border-radius: 4px;}

Código HTML:
Ver original
  1. <form id="formbuscar" name="buscar" action="buscar.php" method="get">
  2. <input type="text" size="8" value="" name="palabra" />
  3. <input type="submit" name="buscar" value="buscar" />
  4. </form>

Intenté aplicar el "border-radius" por separado en una clase al botón y al campo, pero creo que hay algo que hago mal.

De momento he logrado rodear en conjunto el campo de texto y el botón con ese borde redondeado (al haber redondeado los bordes del formulario) pero me sigue sin convencer, cuando aumento el tamaño de la página con Ctrl + se crea un espacio entre el botón y el campo y se despega el borde de 5px redondeado del form.

Última edición por Gambinoh; 13/03/2011 a las 20:19
  #2 (permalink)  
Antiguo 13/03/2011, 21:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Redondear campo de texto

Me parece que deberías aplicarlo a cada elemento en particular y no al formulario.
De todas formas este tipo de elementos no son muy proclives a aceptar demasiado css, aunque a mi me funcionó.
Claro, solo en navegadores que aceptan el radius, no en IE
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 14/03/2011, 00:45
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Redondear campo de texto

Hola Gambinoh,
si deseas aplicar css, a un elemento tipo text, debes aplicarlo directamente al mismo como te lo menciona el compañero C2am. En el código que pones según parece estas formateando al ID #formbuscar, pero este ID pertenece al formulario en si, ya que tu deseas aplicar estilos a los controles tipo text, el código de ejemplo sería el sgte:

Código CSS:
Ver original
  1. input[type=text]{float:right;border:1px solid #888;background:#666;color:#FFF;font-weight:bold;-webkit-border-radius: 5px;
  2. -moz-border-radius: 5px;border-radius: 5px;padding:8px;margin-top:10px;}

si deseas agregar css una clase en particular que pertenezca a un input tipo TEXT,si mal no recuerdo la sintaxis seria la siguiente:

Código CSS:
Ver original
  1. input[type=text].campoform1{/*Stylos*/}


Saludos.

Nota: La propiedad border-radius solo son aceptadas por los navegador como el chrome, FF y el Opera.(El IE no lo soporta)

Etiquetas: campos
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 13:59.