I have an HTML select element with some custom styling on it. There's a region in the inner-right of the select that won't let you click/tap to activate the dropdown, despite the width and everything is correct.
(I am hovering over the select# element here, not a container)
Whenever I hover over the right region of the element, the select element loses hover focus, and its parent is targeted instead.
It's not the drop-down arrow icon, because its width is tiny
and when removed it makes no difference.
What's weird is that this issue appears on mobile devices and Google Chrome (when emulating a mobile device, using taps instead of clicks). When I use Firefox (which doesn't emulate a mobile device, but rather just changes the width/height of the page), everything works fine:
So using a touchscreen device (or simulating one) creates this issue, whereas using a traditional cursor works fine. Is there some difference between a select elements 'hitbox' on the touchscreen that might create this problem?
CodeSandbox
View using Chrome DevTools (or some other mobile device) with a mobile device preset to see the issue
Edit: After some testing, the issue still occurs on android, even if you hook up a mouse. The pointer changes are working, but it still cuts off at a weird place:
Same thing on Chrome, the same thing on Edge. Firefox is the only browser that works fine. Even the Firefox Mobile app on Android works perfectly.
I haven't tested Safari.
Here's the CSS that is acting on the select element:
width: 200px;
display: block;
height: min-content;
font-weight: 700;
font-size: 20px;
padding: 5px 15px;
border-radius: 18px;
transition: background-color 0.2s ease, max-height 0.5s ease;
cursor: pointer;
overflow: hidden;
user-select: none;
position: relative;
border: none;
appearance: none;
src/global/JForm/JForm.css .JForm__menustyle