how do I add an image instead of text

Question

Hi I have a paint app and in the drop down menu I was looking to add an image instead of text like for example instead of selecting the word eraser it gives me an icon of that.

here it is

Drawing tool: <select id="dtool" class="form-control" style="width:100px">
    <option value="line">Line</option>
    <option value="rect">Rectangle</option>
    <option value="pencil">Pencil</option>
    <option value="circle">Circle</option>
    <!--<option value="ellipse">Ellipse</option>-->
    <option value="erase">Eraser</option>
  </select> Line width : <select id="selWidth" class="form-control" style="width:50px">
   <option value="1">1</option>
   <option value="3">3</option>
   <option value="5">5</option>
   <option value="7">7</option>
   <option value="9" selected="selected">9</option>
   <option value="11">11</option>
   <option value="16">32</option>
  </select> Eraser width : <select id="eraseWidth" class="form-control" style="width:120px">
   <option value="6">Small</option>
   <option value="10">Medium</option>
   <option value="17">Large</option>
   <option value="25">Extra Large</option>
  </select> Color : <select id="selColor" class="form-control" style="width:100px">
   <option value="black">Black</option>
   <option value="blue" selected="selected">Blue</option>
   <option value="red">Red</option>
   <option value="green">Green</option>
   <option value="yellow">Yellow</option>
   <option value="gray">Gray</option>
  </select>

Welcome to StackOverflow! In order for us to help you better, can you please update your question so that it shows your **relevant code** in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). It would also be helpful if you could let us know what you have [**tried so far**](http://meta.stackoverflow.com/questions/261592) to solve your problem. For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) — Obsidian Age, Feb 21 '18 at 00:22
Possible duplicate of [Putting images with options in a dropdown list](https://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list) — Siguza, Feb 21 '18 at 00:32

score 0 · Answer 1 · answered Feb 21 '18 at 00:51

This could easily be achieved using an SVG font or an icon font where you set the characters to certain icon, but it would be hard to come by one with the icons you need. Perhaps you could use radio buttons instead of the select dropdown?

I attached a pen that uses an <input type="radio">. This is done by putting the image inside the <label> tag, and changing its appearance based on which <input type="radio"> is checked.

.form-group {
  display:  flex; 
  flex-direction:  row; 
  align-items:  center;
}
.form-group img {
  height:  60px; 
  width:  60px; 
  object-fit:  contain; 
  object-position:  center center; 
}
.option {
  margin-right:  20px; 
}
.option input + label {
  opacity:  .3; 
}
.option input:checked + label {
  opacity: 1; 
}
.option input {
  display:  none; 
}

<div class="form-group" id="tools">
  <div class="option">
    <input type="radio" name="tool" value="fontain-pen" id="fountain-pen">
    <label for="fountain-pen"><img src="https://image.flaticon.com/icons/svg/686/686492.svg"></label>     
  </div>
  <div class="option">
    <input type="radio" name="tool" value="pencil" id="pencil">
    <label for="pencil"><img src="https://image.flaticon.com/icons/svg/686/686491.svg"></label>     
  </div>
  <div class="option">
    <input type="radio" name="tool" value="eraser" id="eraser">
    <label for="eraser"><img src="https://image.flaticon.com/icons/svg/263/263086.svg"></label>     
  </div>  
</div>
<div class="current-option"></div>

how do I add an image instead of text

1 Answers1