如何解决Opera浏览器中HTML select箭头按钮圆角失效问题

如图所示，为<select>标签设置了border-radius，但点击元素时，其箭头按钮并未应用圆角样式，该问题仅出现在Opera浏览器中。

使用的CSS代码如下：

.App select{
  font-family: "Nunito", sans-serif !important;
  font-size: 22px !important;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: #dc3545 solid 1px;
  outline: none;
  padding-left: 15px;
}

Opera基于Chromium内核，其默认的select下拉箭头按钮会自带独立样式，不受父元素border-radius影响，可通过以下两种方式解决：

方法1：自定义箭头按钮样式 #

针对Chromium系浏览器的select箭头按钮伪元素::-webkit-select-arrow-button，直接为其设置圆角并继承父元素边框样式：

.App select::-webkit-select-arrow-button {
  border-radius: 0 0.5rem 0.5rem 0; /* 对应父元素右侧圆角 */
  border: #dc3545 solid 1px;
  border-left: none; /* 避免与父元素边框重叠 */
  background-color: white; /* 匹配父元素背景 */
}

方法2：隐藏默认箭头，自定义箭头图标 #

如果需要更统一的跨浏览器样式，可先隐藏默认箭头，再通过背景图添加自定义箭头：

.App select {
  /* 移除浏览器默认select样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 预留箭头位置，避免文字被遮挡 */
  padding-right: 35px;
  /* 用SVG自定义箭头，颜色与边框一致 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dc3545"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

这种方式能完全控制箭头样式，且在所有现代浏览器中表现一致。

内容的提问来源于stack exchange，提问作者Firas SCMP