Is it possible to style a (must be dropdown list/select option, not checkbox/radio button) options to box/div?

Here is the aspect i want to make, each box represent each option

<label for="product">Choose:</label>

    <select name="product" id="product">
      <option value="70A">Volvo</option>
      <option value="70B">Saab</option>
      <option value="70C">Mercedes</option>
      <option value="75A">Audi</option>
    </select>

Is it possible to do that?

Answer

You need to make divs with each() from all your select options.

Then you get the click on them and change the value of your hidden select.

Edit : i commented my code.

// lets make divs options for the select
customSelect("selectOne", "customSelectOne", 1);
customSelect("selectTwo", "customSelectTwo", 0);

// get the click for each options created
$(document).on("click",".selectOption", function (event) {
  // first, we remove class for each option div
  $(this).parent("div:first").find('.selectOption').removeClass('checked');

  const getOptionID = $(this).data('optionid'); // get value of data optionid
  $(this).toggleClass('checked'); // add/remove checked class
   // change value of hiddent select
  $(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});

$('.hideShowSelect').click(function() {
  $('select').toggle();
});

/*
  loop that make reproduce options of your select
  @select : selector of the select
  @div : selector of the div that will contain the divs for each option
  @checked : 1 to make first div checked or 0 to not
*/
function customSelect(select, div, checked) {
  // we loop each option
  $('select[name="' + select + '"] option').each(function(index) {
    // check if need to add checked class if index is equal to 0 and checked equal to 1
    const checkFirstOption = (index === 0 && checked === 1 ? ' checked' : '');
    const optionVal = $(this).val(); // get option value
    
    // create a div for the option with data value with option value
    $('.' + div).append('<div class="selectOption'+ checkFirstOption +'" data-optionid="' + optionVal + '">' + optionVal + '</div>');
  });
}

#myform {
  max-width:450px;
  margin-top:25px;
}

#myform select {
  display:none;
}

#myform .selectOption {
  color:#141414;
  cursor:pointer;
  display: inline-block;
  border: 1px solid #bebebe;
  padding:15px 17.5px;
  border-radius:2.5px;
  margin:5px;
  transition: all 0.3s ease-out;
}

#myform .selectOption.checked {
  border: 1px solid #111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
  <select name="selectOne">
    <option value="70A">70A</option>
    <option value="70B">70B</option>
    <option value="70C">70C</option>
    <option value="75A">75A</option>
    <option value="75B">75B</option>
    <option value="75C">75C</option>
  </select>
  <div class="customSelectOne"></div>
  
  <select name="selectTwo">
    <option value="80B">80B</option>
    <option value="80C">80C</option>
    <option value="80D">80D</option>
    <option value="85B">85B</option>
    <option value="85C">85C</option>
    <option value="85D">85D</option>
  </select> 
  <div class="customSelectTwo"></div>
</form>

<p><a href="#" class="hideShowSelect">Hide / show select</a></p>