INPUT FORM: como le pongo padding al texto ?

[Italico76]

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:left; color:#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:left; margin:0; } 
   

[kseso?]

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:

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

<input type="text" style="float: right;" size="30" value="" name="query" class="formfield search"/>

Un saludo

[Italico76]

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

[kseso?]

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:

.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í:

.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

[Italico76]

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