Select option Image

by diversalizando

HTML

<select class="my_select">
      <option>1111</option>
      <option selected>2222</option>
      <option>3333</option>
	  </select>

CSS

select {
  width: 100%;
  height: 100px;
  color: transparent;
}

.my_select * {
  color: #000;
  height: 30px;
}

select,option {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
  text-align: center;
  font-size: 18px;
}

select, option:checked {  font-weight: bold; }

JavaScript

$(".my_select").change(function() {
   var value_my_select = $(this).val();
   $(".my_select").css({"background":"url(https://via.placeholder.com/468x60?text=My+image+" +value_my_select + ") no-repeat","background-size": "100% 100%"})
}).trigger( "change" ); 

//$(".my_select").val("3333").trigger( "change" );