Customizable dropdown menus for product variants

https://www.polivantage.com/developmentlog/customdropdownmenus

Success.
 

<!--CUSTOM DROPDOWN MENUS SUBSTITUTION-->
<script>
document.addEventListener('DOMContentLoaded', function () {
//mobile check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
const subString = '/shop';
const subStringTwo = 'shop/p/';
const getURL = window.location.href;
//make custom options button with gear spinner icon
function substituteSelect(select) {
const newSelectButton = document.createElement('div');
newSelectButton.classList.add('newSelectButton');
const selectText = select.getAttribute('data-variant-option-name') || 'Choose an option';
select.style.display = 'none';
select.parentNode.appendChild(newSelectButton);
const gearDiv = document.createElement('div');
gearDiv.id = "spinner";
gearDiv.classList.add('option-select-gear', 'spinner');
newSelectButton.appendChild(gearDiv);
const buttonText = document.createElement('div');
newSelectButton.appendChild(buttonText);
buttonText.innerHTML = selectText;
buttonText.classList.add('newSelectButtonText');
//adjust positioning
if (getURL.includes(subStringTwo)) {
gearDiv.style.top = '1px';
newSelectButton.style.marginTop = '20px';
} else {
gearDiv.style.top = '10px';
}
// When the custom button is clicked, show the custom dropdown
newSelectButton.addEventListener('click', function (event) {
event.preventDefault();
// Remove existing dropdown to avoid duplicates
const existingContainer = document.getElementById('customDropdownContainer');
if (existingContainer) {
existingContainer.remove();
}
// Create new dropdown container
const container = document.createElement('div');
container.id = 'customDropdownContainer';
container.classList.add('customDropdownContainer');
const optionContainer = document.createElement('div');
optionContainer.id = 'customDropdownOptionContainer';
optionContainer.classList.add('customDropdownOptionContainer');
container.appendChild(optionContainer);
// Populate menu with select options
const optionEmptyStart = document.createElement('div');
optionEmptyStart.classList.add('customDropdownEmptyOption');
optionContainer.appendChild(optionEmptyStart);
const options = select.options;
for (let i = 0; i < options.length; i++) {
const option = document.createElement('div');
option.classList.add('customDropdownOption');
if (i !== 0) {
option.innerHTML = options[i].text;
// Select the option and close the dropdown
option.addEventListener('click', function () {
select.selectedIndex = i;
buttonText.innerHTML = options[i].text;
// Trigger change event to retain functionality
const event = new Event('change');
select.dispatchEvent(event);
container.remove();
});
optionContainer.appendChild(option);
}
}
const optionEmptyEnd = document.createElement('div');
optionEmptyEnd.classList.add('customDropdownEmptyOption');
optionContainer.appendChild(optionEmptyEnd);
// Append dropdown to body and position it
document.body.appendChild(container);
const rectSelect = newSelectButton.getBoundingClientRect();
container.style.position = 'absolute';
container.style.top = `${rectSelect.top + window.scrollY + 2}px`; 
container.style.left = `${rectSelect.left + window.scrollX - 2}px`; 
container.style.width = `${newSelectButton.offsetWidth}px`; 
// Close dropdown when clicking outside
document.addEventListener('click', function closeDropdown(event) {
if (!container.contains(event.target) && event.target !== newSelectButton) {
container.remove();
document.removeEventListener('click', closeDropdown);
}
});
});
}
//initiate dropdown menu replacement
if (!isTouch && getURL.includes(subString)) {
const selects = document.querySelectorAll('select');
selects.forEach(select => {
substituteSelect(select);
});
}
});
</script>

Some CSS to go along with it:
 

//hide stock//
.variant-select-wrapper {
 // display: none !important;
  padding: 0 !important;
}
.variant-select-wrapper::before {
  display: none !important;
}
.newSelectButton{
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding-left: 10px;
  letter-spacing: 1.2px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.newSelectButtonText {
  pointer-events: none;
}
.customDropdownContainer {
  background-image: linear-gradient(to bottom, rgba(255,191,0,0) 0%, rgba(255,191,0,1) 10%, rgba(255,191,0,1) 90%, rgba(255,191,0,0) 100%);
  z-index: 1000;
  position: absolute;
  z-index: 9999;
  border-left: solid 2px;
  border-right: solid 2px;
  border-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 87%, rgba(0,0,0,0) 100%);
  border-image-slice: 1;
}
.customDropdownOption {
  font-size: 1.4em;
  padding-top: 3px;
  padding-bottom: 3px;
  letter-spacing: 1.2px;
  padding-left: 10px;
  padding-right: 5px;
  cursor: pointer;
}
.customDropdownOption:hover {
  color: var(--color1);
  background: #000000;
}
.customDropdownEmptyOption {
  height: 27px;
}
.option-select-gear {
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/3b177fcd-72b2-462f-a563-e73fd964de8f/Gearicon1.png');
  border: 0px !important;
  width: 25px !important;
  height: 25px !important;
  left: -35px;
  position: absolute;
  pointer-events: none;
}
.spinner {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: rotator 33s linear infinite;
}