Skip to main content
reformulación
Origen Enlace
Nicolas Oñate
  • 3.3k
  • 2
  • 24
  • 43

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?

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, pero no funciona, según tengo entendido firefox no lo soporta, pero yo estoy usando chrome, así que no debería tener problema en visualizarlo.

¿Por qué sucede esto y cómo puedo crearlo para que funcione?

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>

Esta solución no es válida porque era solo para firefox pero dejó de ser valido, sugiere que usemos librerías externas como JQueryUI pero no puedo usar librerías

¿Por qué sucede esto y cómo puedo crearlo para que funcione?

Origen Enlace
Nicolas Oñate
  • 3.3k
  • 2
  • 24
  • 43

Mostrar imagenes en select

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, pero no funciona, según tengo entendido firefox no lo soporta, pero yo estoy usando chrome, así que no debería tener problema en visualizarlo.

¿Por qué sucede esto y cómo puedo crearlo para que funcione?