Foros del Web » Creando para Internet » CSS »

INPUT FORM: como le pongo padding al texto ?

Estas en el tema de INPUT FORM: como le pongo padding al texto ? en el foro de CSS en Foros del Web. Amigos: tengo un formulario de busqueda al cual le quise poner una lupita dentro del <INPUT ...> para que se vea como aca -no es ...
  #1 (permalink)  
Antiguo 28/12/2008, 04:03
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Pregunta INPUT FORM: como le pongo padding al texto ?

Amigos: tengo un formulario de busqueda al cual le quise poner una lupita dentro del <INPUT ...> para que se vea como aca -no es un boton de busqueda-

La cuestion es que logro que la lupita aparazca bien al comienzo del INPUT pero el cursor tambien se pone ahi y escribo sobre la imagen de la lupa

Como puedo solucionar esto ? puedo hacer un padding solo para el texto de dentro del INPUT ???

Gracias desde ya!!!!!!!!!! y les adjunto lo que tengo hecho:

Código PHP:
<form name="buscador" class="headerSearch" action="blogs.php" method="post"><input name="quest" type="text" class="searchInput" value="" maxlength="255" /><div class="searchBtn"><input type="submit" value="Buscar" class="btn" /></div></form
Código PHP:
.headerSearch
{float:leftcolor:#fff; margin:14px 0 0 -134px; / margin:14px 0 0 -77px; }

.searchInput
float:left;  color:#292929; margin-left:57px; padding: 5px; width:425px;  height:24px;  padding:1px;  border:1px solid #3a6ac84  border-right-width:0;  font-size:1.6em;background: #FFFFFF url(/imagenes/searchicon.gif) no-repeat 0px 5px; } 


.btn
{  display:inline-block;   padding:4px;   width:112px;   height:30px;   border:1px solid #E1771E;   background:#f00;  color:#fff;  font-weight:bold;  cursor:pointer;  margin-right:8px; }

.searchBtn
{float:leftmargin:0; } 
__________________
Salu2!
  #2 (permalink)  
Antiguo 28/12/2008, 08:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: INPUT FORM: como le pongo padding al texto ?

Hola Italico:
En el ejemplo de referencia, la lupa es una imagen de fondo, y las clases que afectan al padding en el campo de búsqueda son:
Cita:
div.rightlogo input.search {
background:#FFFFFF url(/forums/myimages/style/searchicon.gif) no-repeat scroll 0 5px;
padding-left:20px;
width:170px;
}

div.rightlogo input.formfield{
border:thin solid #BBBBBB;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:16px;
font-weight:bold;
margin-top:10px;
padding:5px;
}
Y en el html le aplica las dos clases
Cita:
<input type="text" style="float: right;" size="30" value="" name="query" class="formfield search"/>
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 31/12/2008, 14:49
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: INPUT FORM: como le pongo padding al texto ?

Amigo kseso?: me funciono de primera!!!! excelente explicacion.......

ya podes ver como quedó acá: http://www.yeapdir.com/es

mil gracias!!! y feliz año nuevo
__________________
Salu2!
  #4 (permalink)  
Antiguo 01/01/2009, 05:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: INPUT FORM: como le pongo padding al texto ?

10-4 Itálico.
Te quedo bien.
Si me permites un par de observaciones sobre gustos personales, yo centraría algo más el texto en el campo de búsqueda, lo acortaría (me parece excesivamente largo, lo alinearía con las opciones del menú y... bueno te dejo las propiedades:
Cita:
.searchInput {/* en busca.css (línea 4) */

background:#FFFFFF url(/imagenes/searchicon.gif) no-repeat scroll 0 2px;
color:#292929;
float:left;
font-size:1.2em;
height:19px;
margin-left:57px;
padding:0 0 0 25px;
width:200px;
}
Y el botón lo sacaría de ese div que tienes creado exprésamente para él, no lo necesitas, ponlo directamente a continuación del campo de texto (en el html) y a mí me gustó así:
Cita:
.btn { /*busca.css (línea 9)*/
background-color:#FF0000;
border:1px outset #FFFFFF;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-weight:bold;
height:23px;
margin:0 0 0 5px;
width:112px;
}
Pero no me hagas mucho caso, son solo gustos personales.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 02/01/2009, 05:09
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
De acuerdo Respuesta: INPUT FORM: como le pongo padding al texto ?

Ya me expiro la session y se me borro el mensaje 2 veces!!!!!!!!!!!!!

Cortito: mil gracias!!!!!!! tenias razon en lo del DIV y estoy evaluando los otros cambios que propones

gracias!!!!!!!!!!
__________________
Salu2!
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 22:51.