How do I select from a list of image options?

Question

I am trying to implement a design where the select input displays a list of images to pick from.

<select name="choose-image">
    <option value="" disabled selected>Choose your image</option>
    <option value="Smiling"><img src={image} alt="local-avatar" /></option>
    <option value="Sad">Sad</option>
</select>

The second option doesn't display anything and even if it does, I need to style the dropdown and I'm still not sure how. Thanks for any help. Thanks.

Answer 1

Direct use of images in element tags is not supported in HTML. The reason the second option doesn't display anything is that the

tag is intended to be plain text, not an HTML element. To implement a design where you want to display a list of images for selection, you can use a custom selection dropdown menu using HTML, CSS, and JavaScript. There are several libraries and plugins available that can help you achieve this, such as Select2, Chosen or a custom implementation using CSS and JavaScript. Here is an example of how to create a custom selection drop-down menu using images:

HTML

<div class="custom-select">
  <span class="selected-option">Choose your image</span>
  <ul class="options">
    <li data-value="Smiling"><img src="{image_url}" alt="Smiling" /></li>
    <li data-value="Sad"><img src="{image_url}" alt="Sad" /></li>
    <!-- Add more image options here -->
  </ul>
</div>

CSS:

css
.custom-select {
  position: relative;
  display: inline-block;
}

.selected-option {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  display: block;
  width: 200px; /* Set the desired width of the select */
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none;
  max-height: 200px; /* Set the desired max height of the dropdown */
  overflow-y: auto;
}

.options li {
  padding: 8px;
  cursor: pointer;
}

.options li:hover {
  background-color: #f0f0f0;
}

JavaScript :

const customSelect = document.querySelector('.custom-select');
const selectedOption = customSelect.querySelector('.selected-option');
const optionsList = customSelect.querySelector('.options');

selectedOption.addEventListener('click', () => {
  optionsList.style.display = optionsList.style.display === 'block' ? 'none' : 'block';
});

optionsList.addEventListener('click', (event) => {
  const selectedValue = event.target.getAttribute('data-value');
  selectedOption.textContent = selectedValue;
  optionsList.style.display = 'none';
});

In this example, you can replace {image_url} with the actual url of the image you want to display. When the user clicks on the custom selection it will display a list of images and when the user selects an image it will update the selected option accordingly. Keep in mind that this is a basic example and you may need to adjust the CSS and JavaScript based on your specific needs and styling preferences. Additionally, for more complex applications, consider using front-end frameworks such as React or Vue.js.