Estoy tratando de realizar un simple <select>
, que contengan dos imágenes, pero resulta que no es tan sencillo ya que meter una etiqueta <img>
dentro de un <option>
no es posible, tampoco tolera los <span>
. He mirado en el foro en inglés y me he encontrado con esta respuesta la cual me ha llevado a realizar este fiddle para comprobar su funcionalidad.
<select class="form-control input-lg" id="exampleFormControlSelect1">
<option style="background-image:url(https://cdn.countryflags.com/thumbs/portugal/flag-800.png);">
Português
</option>
<option style="background-image:url(https://cdn.countryflags.com/thumbs/spain/flag-800.png);">
Español
</option>
</select>
Como se puede observar, es un código sencillo, peroEsta solución no funciona, según tengo entendidoes válida porque era solo para firefox no lo soporta, pero yo estoy usando chromedejó de ser valido, asísugiere que no debería tener problema en visualizarlo.usemos librerías externas como JQueryUI pero no puedo usar librerías
¿Por qué sucede esto y cómo puedo crearlo para que funcione?