como simular una imagen dentro de un textbox

[atschamler]

Hola Gente!, espero que no hayan creado ya este tema porque la verdad lo busque pero no encontre respuesta a mi problema.
El tema es que estoy queriendo hacer una caja de texto para almacenar una fecha con un boton, y me gusto mucho como esta implementada en la siguiente pagina
http://www.despegar.com.ar/

fijense en como ingresa la fecha por medio de un calendario haciendo click en la imagen del calendario, aparentemente esta imagen esta dentro del text box, ya me harte de buscar y lo mas parecido que se puede hacer es poniendo una imagen de fondo al text box y alinearla a la izquierda, pero no se puede hacer click en la imagen porque al ser imagen de fondo no se tiene acceso a ella. ya me fije en el codigo fuente de la pagina pero no pude sacar como lo hacen. Me imagino que sera
con la etiqueta div, poniendo una caja de texto sin borde y una imagen del calendario haciendo un link a esa imagen para que por medio de javascript abra el calendario y listo. Pero el tema es que no lo pude sacar. no lo puedo dejar graficamente igual. debido al tema del margin, border, padding etc. no lo puedo dejar igual. alguien me puede dar una mano con este tema??? pof favor!!!
desde ya muchas gracias!!!

[kseso?]

El marcado html:

Código CSS:

<p class="departuredateline" id="departuredateline">
<label for="departure" id="labeldeparture">Partida:</label>
<input type="text" class="dateInput default isCalendar focused" id="departure">
<div class="mainSprite buttonCalendarOn calendarImage"></div>
<span class="mainSprite errorIcon"></span>
</p>
 

El css que aplica a <div class="mainSprite buttonCalendarOn calendarImage"></div> que es el que lleva la imagen (que por cierto utiliza un sprite)
.

Código CSS:

searchBoxFlights .calendarImage {
    float: left;
    margin-left: -19px;
    margin-top: 2px;
}
.buttonCalendarOn {
    background-position: -340px -602px;
    height: 18px;
    width: 17px;
}
.tabExternal, .tabInternal, .tabExternalSelected, .tabInternalSelected, .mainSprite, button span, button em, .button span, .button em, #icoVuelos, #icoHoteles, #icoPaquetes {
    background-attachment: scroll;
    background-image: url("/css/despegar/sprites/mainSprite.png");
    background-repeat: no-repeat;
    display: block;
}
 

Y la imagen mencionada es ésta

[atschamler]

kseso? , muchisimas gracias y me sorprendio la rapidez con que diste tu respuesta, efectivamente es como decis, la verdad recien estoy aprendiendo php mysql y html, aunque ya hice 2 sistemas en ese lenguaje, todos los dias se aprende algo, la verdad no sabia eso de los sprites, aunque se q las skins de algunos juegos como ser del quake usaban eso o algo muy parecido.
quise probar solamente con el codigo que vos extragiste de la pagina, pero no quedo bien, la extrae bien a la imagen del calendario pero no queda correctamente como si estaria superpuesta con la caja de texto. debe estar faltando algo de codigo, pero bueno lo solucionare de otra manera, de todas maneras me sirvio muchisimo tu respuesta y te lo agradezco.
lo solucionare poniendola como imagen de background, obviamente no a la imagen de sprite, sino solamente al calendario y cuando haga click en la caja de texto hago que se abra el calendario y listo, de la misma manera quedo bien.
la unica diferencia es que el cursor cambia cuando pasas por toda la caja de texto y no solamente por donde esta la imagen de background (obvio) pero de todas maneras quedo bien. muchas gracias!!! saludos!! podemos dar por terminado el tema.

[Dalvenjha]

Simple muchacho la imagen debe ser algún elemento con posicionamiento negativo, hacer eso es sencillo, yo me preocuparía más de como sacar el calendario, creo que se usa jquery para ello no?, por otro lado para haerte las cosas sencillas podrías usar el siguiente esquema:

Código HTML:

<div>(U otro elemento de bloque)
<input type="text" id="blabla" />
<img src="blabla" alt="" />
</div> 

Donde tendrías que jugar con el elemento <img> esto es posible convirtiendolo en elemento de bloque (Si por ahí salta algún purista a decirme que un elemento img no debe ser bloque nunca, entonces lo envuelves dentro de un párrafo) Luego le das posición relativa, lo flotas a la izquierda y le das márgenes negativos: listo!.

Para esto también deberías trabajar un poco el div, pero eso queda ya a tu criterio.

Saludos

[atschamler]

Iniciado por Dalvenjha

Simple muchacho la imagen debe ser algún elemento con posicionamiento negativo, hacer eso es sencillo, yo me preocuparía más de como sacar el calendario, creo que se usa jquery para ello no?, por otro lado para haerte las cosas sencillas podrías usar el siguiente esquema:

Código HTML:

<div>(U otro elemento de bloque)
<input type="text" id="blabla" />
<img src="blabla" alt="" />
</div> 

Donde tendrías que jugar con el elemento <img> esto es posible convirtiendolo en elemento de bloque (Si por ahí salta algún purista a decirme que un elemento img no debe ser bloque nunca, entonces lo envuelves dentro de un párrafo) Luego le das posición relativa, lo flotas a la izquierda y le das márgenes negativos: listo!.

Para esto también deberías trabajar un poco el div, pero eso queda ya a tu criterio.

Saludos

Muchas gracias por tu respuesta Dalvenjha, es asi como decis, es mas mira!!! teniamos un ejemplo en esta misma pagina y no me di cuenta fijate en lo mas alto de la pagina la caja de texto de busqueda tiene el icono de la lupa
como si fuese parte de la caja de texto , ese es el efecto que queria realizar, o que parezca que esta dentro. Esta muy bueno ese efecto es muy estetico, ya que cuando le pongo una caja de texto suelta con un boton suelto depende como lo renderiza el browser , se mueve queda en otro lado de diferentes tamaño la caja respecto del boton, etc y queda feo esteticamente. Pero buee ya lo solucione como antes mencione poniendo el calendario como imagen de fondo de la caja de texto alineada a la derecha y listo cuando haga click en la caja de texto se despliega el calendario, y buee asi quedo muy lindo. la unica diferencia con la pagina despegar.com.ar, es que cuando pasas el mouse por toda la caja de texto el icono del puntero cambia, y no solamente por la imagen del calendario, pero buee quedo bien y estoy conforme, me gustaria mostrartelo pero no se como. Saludos!! y muchas gracias por tu respuesta!