HTML select元素点击热区不准确问题排查求助

问题现象 #

• 为HTML <select>元素添加自定义样式后，尽管width等属性设置正确，但元素内部右侧区域无法通过点击/触摸触发下拉菜单。
• 当鼠标悬停在元素右侧区域时，<select>会失去悬停焦点，焦点自动切换到其父元素。
• 下拉箭头图标并非问题根源：该图标宽度极小，即使移除，问题仍然存在。
• 问题具有环境特异性：仅在移动设备、Chrome浏览器（模拟移动设备/启用触摸操作模式）中出现；Firefox（桌面端仅调整页面尺寸、移动端应用）下一切正常。即使Android设备连接鼠标，点击热区仍会异常截断，Chrome和Edge均存在此问题，暂未测试Safari。

涉事CSS代码 #

作用于该<select>元素的样式规则：

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

疑问 #

是否是触摸屏设备下<select>元素的点击热区机制与传统光标操作存在差异，导致自定义样式后热区被异常截断？

内容的提问来源于stack exchange，提问作者Josh Silveous