From the title of this question, I’ve been trying to change the options hover color of my dropdown options from the default blue to this #f2f2f2 but I am not able to. I was able to add a select focus color but anything else I’ve done is not taking effect. Any and all suggestions are welcome.

<div id="pivot-container"></div>
        <div id="popupOverlay" class="hideCustomPopup"></div>
        <div id="custom-options-popup" class="hideCustomPopup">
          <div id="custom-options-popup-title">
           Layout Options
          </div>

          <h4>Grand Totals</h4>
          <select id="custom-options-grand-totals-select">
            <option selected value="">Select</option>
            <option value="on">Show grand totals</option>
            <option value="rows">Show for rows</option>
            <option value="column">Show for coulmns</option>
            <option value="off">Do not show grand totals</option>
          </select>

          <h4>Subtotals</h4>
          <select id="custom-options-subtotals-select">
            <option selected value="">Select</option>
            <option value="on">Show subtotals</option>
            <option value="rows">Show for rows</option>
            <option value="column">Show for coulmns</option>
            <option value="off">Do not show subtotals</option>
          </select>

          <h4>Layout</h4>
          <select id="custom-options-layout-select">
            <option selected value="">Select</option>
            <option value="flat">Flat form</option>
            <option value="classic">Classic form</option>
            <option value="compact">Compact form</option>
          </select>

          <div id="custom-options-popup-buttons-wrap">
            <button onclick="closeOptionsPopup()" class="clear-btn">
              Clear
            </button>
            <button onclick="submitOptions()" class="submit-btn">Submit</button>
          </div>
        </div>

function showOptionsPopup() {
          const popup = document.querySelector(
            '#custom-options-popup'
          ) as HTMLElement;
          const popoupOverlay = document.querySelector(
            '#popupOverlay'
          ) as HTMLElement;
          const clearBtn = popup.querySelector('.clear-btn'); 
          const submitBtn = popup.querySelector('.submit-btn');

          popup.classList.remove('hideCustomPopup');
          popoupOverlay.classList.remove('hideCustomPopup');
          popoupOverlay.onclick = closeOptionsPopup;

          // Remove existing event listeners to avoid duplication
          clearBtn.removeEventListener('click', closeOptionsPopup);
          submitBtn.removeEventListener('click', submitOptions);

          // Add event listeners
          clearBtn.addEventListener('click', closeOptionsPopup);
          submitBtn.addEventListener('click', submitOptions);
        }

        function closeOptionsPopup() {
          const popup = document.querySelector('#custom-options-popup');
          const popupOverlay = document.querySelector('#popupOverlay');
          popup.classList.add('hideCustomPopup');
          popupOverlay.classList.add('hideCustomPopup');
        }

        function submitOptions() {
          const grandTotalsSelect = document.getElementById(
            'custom-options-grand-totals-select'
          ) as HTMLSelectElement;
          const subtotalsSelect = document.getElementById(
            'custom-options-subtotals-select'
          ) as HTMLSelectElement;
          const layoutSelect = document.getElementById(
            'custom-options-layout-select'
          ) as HTMLSelectElement;

          // Get the selected values
          const grandTotalsValue = grandTotalsSelect.value;
          const subtotalsValue = subtotalsSelect.value;
          const layoutValue = layoutSelect.value;

          let options = this.pivot.getOptions();
          options.grid.type = layoutValue;
          options.grid.showTotals = subtotalsValue;
          options.grid.showGrandTotals = grandTotalsValue;
          this.pivot.setOptions(options);
          this.pivot.refresh();
          closeOptionsPopup();
        }

        let optionsTab = tabs.find((tab) => tab.id == 'fm-tab-options');
        if (optionsTab) {
          optionsTab.handler = () => {
            showOptionsPopup();
          };
        }

.hideCustomPopup {
  display: none !important;
}

#popupOverlay {
  z-index: 199;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}

#custom-options-popup {
  font-family: normal normal normal 12px / 13px 'Open Sans', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  flex-flow: column;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  position: absolute;
  padding: 40px;
  width: 21%;
  height: 88%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0;
  bottom: 0;
  margin-top: auto;
  z-index: 200;
}

#custom-options-popup-title {
  font-size: 18px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #bd0024;
  margin-bottom: 40px;
}
#custom-options-popup h4 {
  font-size: 13px !important;
  margin: 20px 0 0 0;
  font-weight: 550;
}
#custom-options-popup select {
  /*   margin: 0; */
  padding: 7px 40px 7px 12px;
  border: 1px solid #e8eaed;
  border-radius: 0;
  background: white;
  box-shadow: 0 1px 3px -2px #9098a9;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
}

#custom-options-popup-buttons-wrap {
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  height: 38px;
  letter-spacing: 0.5px;
}

#custom-options-popup-buttons-wrap button {
  display: block;
  flex-grow: 1;
  border: none;
  padding: 10px 15px;
  color: #555;
  background-color: white;
  font-size: 18px;
}
#custom-options-popup-buttons-wrap button:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
#custom-options-popup-buttons-wrap .submit-btn {
  color: white;
  background-color: #555;
}
#custom-options-popup-buttons-wrap .submit-btn:hover {
  background-color: #444;
}

#custom-options-popup-buttons-wrap .clear-btn {
  color: #525252;
  background-color: #f9f9f9;
}

#custom-options-popup-buttons-wrap .clear-btn:hover {
  background-color: #e0e0e0;
}

#custom-options-layout-select {
  padding: 7px 12px;
  border: 1px solid #e8eaed;
  border-radius: 0;
  background: white;
  box-shadow: 0 1px 3px -2px #9098a9;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
}

.custom-select {
  position: relative;
  display: inline-block;
  width: 150px;
}

.selected-option {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.options {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
}

.options a {
  display: block;
  padding: 10px;
}

.options a:hover {
  background: #f2f2f2;
}

.custom-select:focus .options {
  display: block;
}

select:focus > option:checked {
  background: #f2f2f2 !important;
}

I tried this for all the dropdowns but it did not work.

#custom-options-grand-totals-select option {
  background: #f2f2f2 !important;
}