Imagen en el elemento SELECCIONAR

Sé cómo mostrar las imágenes junto a las opciones en un elemento de formulario desplegable HTML utilizando la propiedad CSS background-image.Imagen en el elemento SELECCIONAR

Sin embargo, las imágenes no aparecen en el elemento seleccionado. ¿Hay alguna forma de hacer esto (preferiblemente usando solo CSS)?

EDIT:

Aquí se muestra un ejemplo del código de trabajo para los elementos de la lista. Sin embargo, cuando el desplegable está cerrado, sólo se ve el texto del elemento seleccionado, sin la imagen:

<select name="form[location]"> 
    <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option> 
    <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option> 
    <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option> 
    <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option> 
    <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option> 
    <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option> 
    <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option> 
    <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option> 
    <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option> 
    <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected">Argentina</option> 

    [...] - I think you get the idea. 

</select>

Fuente

2009-11-08 Franz

¿En el segundo elemento de selección o en el segundo elemento de opción? ¿Tiene un ejemplo de su HTML al que intenta aplicar esto? – JasonWyatt

Buen punto. Editado el código. – Franz

https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ – Stefan

Hacer esto de una manera multi-navegador va a ser muy difícil, y yo sospecha, imposible.

En su lugar, es posible que desee intentar el uso de un widget que se ve y actúa como un cuadro de selección, pero se hace w/HTML & Javascript.

Aquí hay una manera de hacerlo con jQuery:

jquery.combobox

Fuente

2009-11-08 23:05:38 nicholaides

Ah, gracias chicos. Eso es lo que esperaba que no sucediera, pero lo sospeché;) Pero el enlace se ve bien, podría usarlo más adelante. – Franz

Estoy de acuerdo con Nicholaides. Hacer eso estrictamente con HTML y CSS no va a funcionar.

Te conviene usar una técnica de mejora progresiva para colocar un cuadro de selección regular en la página para usuarios que no usan javascript o usar lectores de pantalla y similares, luego usa javascript para reemplazar el cuadro de selección por uno más bonito , widget más elegante

Fuente

2009-11-08 23:09:19

Saludos. Probablemente haga las mejoras progresivas, en una versión posterior ... – Franz

Respuesta

Cuestiones relacionadas