如何通过CSS移除Chrome移动端浏览器下拉菜单中的单选按钮

问题现象截图：移动端下拉菜单内显示的单选按钮

桌面端开发者工具无法复现该问题是正常现象：Chrome移动端的原生<select>下拉浮层是调用系统级控件渲染的，这部分节点不属于普通网页DOM范畴，桌面端的移动端模拟模式仅做了视口尺寸和UA的模拟，不会触发真实移动端的原生控件渲染逻辑，自然抓不到对应元素。

你可以通过以下两种方案实现需求：

• 方案1：覆盖原生select渲染逻辑（无需真机调试，纯CSS实现）
  给下拉菜单元素添加如下CSS样式，直接禁用WebKit内核浏览器对select的原生控件渲染，自带的单选按钮会随原生渲染逻辑一起被移除：

  select {
    -webkit-appearance: none;
    appearance: none;
    /* 禁用原生样式后默认下拉箭头会消失，可通过背景图自定义箭头样式 */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 36px;
  }
  

  该写法兼容性覆盖所有安卓端WebKit内核浏览器，写完直接在真机上验证即可，不需要额外调试元素选择器。
• 方案2：真机远程调试获取元素选择器
  如果你需要保留原生下拉的交互和样式，仅隐藏单选按钮，可以通过Chrome官方的真机调试能力直接抓取真实DOM：
  1. 安卓手机开启开发者选项，打开「USB调试」开关
  2. 用数据线连接电脑，手机端弹出调试授权时选择允许
  3. 电脑端Chrome地址栏输入chrome://inspect，在设备列表中找到手机上打开的目标页面，点击Inspect即可打开和真机实时同步的开发者工具
  4. 操作手机点开下拉菜单，就能在元素面板中找到单选按钮对应的节点，复制其选择器后添加display: none !important;样式即可完成隐藏。

提示：所有涉及移动端原生表单控件的样式问题，都无法通过桌面端模拟模式完全复现，必须通过真机调试才能拿到准确的DOM结构和样式表现。

内容的提问来源于stack exchange，提问作者Hasnain Ghias