JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <div id="disabledMask"></div>
  <select id="mySelect">
    <option disabled selected>Please Select</option>
    <option value="foo">Bar</option>
  </select>
</label>

CSS

label {
  position: relative;
}

#disabledMask {
  position: absolute;
  background-color: #fff;
  opacity: 0.5;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: none;
}

JavaScript

var toggleMask = function(){
  var option = this.options[this.selectedIndex];
  var disabledMask = document.getElementById('disabledMask');
  disabledMask.style.display = option.disabled? 'block' : 'none';
};
    
var mySelect = document.getElementById('mySelect');
mySelect.addEventListener('change', toggleMask);
toggleMask.bind(mySelect)();