如何移除移动端Chakra UI Select组件的选中高亮效果

问题根源 #

移动端（尤其是iOS Safari）的原生<select>组件选项高亮样式由系统默认控制，普通:checked伪类样式优先级不足，仅在选项切换瞬间生效，无法覆盖选择器打开时的默认浅蓝色高亮。

解决方案 #

方法1：在Select组件的sx属性中直接覆盖原生样式 #

通过在Select的sx中针对<option>和iOS专属伪元素::-webkit-select-highlight设置样式，强制覆盖系统默认效果：

<Select
  icon={<DropdownIcon />}
  value={yearsRange[date.getFullYear()]}
  onChange={handleYearChange}
  fontWeight="600"
  border="none"
  background="transparent"
  fontSize="20px"
  color={colors.primary}
  sx={{
    appearance: 'none',
    padding: '0 5px',
    paddingInlineStart: 'none',
    WebkitPaddingStart: 'none',
    '& + .chakra-select__icon-wrapper': {
      order: -1,
      position: 'static',
      transform: 'none',
    },
    // 新增：自定义选项样式及移动端高亮
    '& option': {
      backgroundColor: 'white', // 未选中时背景
      color: colors.primary,
      // 选中时持久样式
      '&:checked': {
        backgroundColor: colors.primary,
        color: colors.white,
      },
      // 覆盖iOS选中高亮伪元素
      '&::-webkit-select-highlight': {
        backgroundColor: colors.primary,
      },
      // 覆盖Android选中焦点样式
      '&:focus': {
        backgroundColor: colors.primary,
        color: colors.white,
      },
    },
  }}
  rootProps={{
    display: 'flex',
    alignItems: 'center',
  }}
>
  {yearsRange.map((year) => (
    <option key={year} value={year}>
      {year}
    </option>
  ))}
</Select>

方法2：全局CSS覆盖 #

若需在全项目统一修改，可在全局样式文件中添加以下代码：

/* 覆盖iOS Select选项高亮 */
select option::-webkit-select-highlight {
  background-color: #你的primary颜色值;
}

/* 强制设置选中选项样式 */
select option:checked {
  background-color: #你的primary颜色值 !important;
  color: #你的white颜色值 !important;
}

方法3：Chakra UI主题定制 #

使用Chakra主题时，可在主题的components.Select中配置全局样式：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Select: {
      baseStyle: {
        field: {
          '& option': {
            backgroundColor: 'white',
            color: 'primary',
            '&:checked': {
              backgroundColor: 'primary',
              color: 'white',
            },
            '&::-webkit-select-highlight': {
              backgroundColor: 'primary',
            },
          },
        },
      },
    },
  },
  colors: {
    primary: '#你的primary颜色',
    white: '#ffffff',
  },
});

export default theme;

说明 #

• 可移除原StyledOption，直接使用原生<option>即可，Chakra的Select会自动继承父组件样式设置。
• ::-webkit-select-highlight是iOS Safari专属伪元素，用于控制选项选中时的高亮背景；Android则通过:focus伪类处理。
• 若样式仍不生效，可尝试添加!important提升优先级，但优先通过Chakra样式层级覆盖。

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