Allow "required" select field to use native browser focus and tooltip if no value is set

[arnelap]

Is your feature request related to a problem? Please describe.
When a select is set to "required" the form won't submit, but as the select field is hidden via display: none the browser can't give it focus and can't show a tooltip.

Describe the solution you'd like
The way I solved it is with some custom css:

.choices [hidden] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  display: block !important;
  bottom: 0;
  left: 0;
}
.choices:has(select:focus) {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

Describe alternatives you've considered
I first did this with js with something like this, that worked as well but iI think a pure css solution is more elegant.

 select.addEventListener('invalid', e => {
      e.preventDefault();
      container.classList.add('is-invalid');
      container.focus();
    });