无法使用 &::-webkit-slider-thumb 添加边框

Question

这是我用来设置范围滑块样式的代码：

<input
  id="custom-range-slider"
  type="range"
  min={min}
  max={max}
  step={step}
  value={currentValue}
  onChange={handleChange}
  disabled={disabled}
  className={cn(
    // Base slider styles
    'w-full cursor-pointer appearance-none bg-transparent focus:outline-none',
    // Disabled state
    'disabled:pointer-events-none disabled:opacity-50',
    // WebKit thumb styles (Chrome, Safari, Edge)
    '[&::-webkit-slider-thumb]:-mt-0.5',
    '[&::-webkit-slider-thumb]:h-4',
    '[&::-webkit-slider-thumb]:w-4',
    '[&::-webkit-slider-thumb]:appearance-none',
    '[&::-webkit-slider-thumb]:rounded-full',
    '[&::-webkit-slider-thumb]:bg-white',
    '[&::-webkit-slider-thumb]:border-2', // Add border
    '[&::-webkit-slider-thumb]:border-blue-600', // Border color
    '[&::-webkit-slider-thumb]:shadow-md', // Add shadow
    '[&::-webkit-slider-thumb]:shadow-blue-300', // Customize shadow color if needed
    '[&::-webkit-slider-thumb]:transition-all',
    '[&::-webkit-slider-thumb]:duration-150',
    '[&::-webkit-slider-thumb]:ease-in-out',
    // Firefox thumb styles
    '[&::-moz-range-thumb]:h-4',
    '[&::-moz-range-thumb]:w-4',
    '[&::-moz-range-thumb]:appearance-none',
    '[&::-moz-range-thumb]:rounded-full',
    '[&::-moz-range-thumb]:border-4',
    '[&::-moz-range-thumb]:border-blue-600', // Add border color
    '[&::-moz-range-thumb]:bg-white',
    '[&::-moz-range-thumb]:shadow-md', // Add shadow for Firefox
    '[&::-moz-range-thumb]:shadow-blue-300', // Customize shadow color if needed
    '[&::-moz-range-thumb]:transition-all',
    '[&::-moz-range-thumb]:duration-150',
    '[&::-moz-range-thumb]:ease-in-out',
    // WebKit track styles (Chrome, Safari, Edge)
    '[&::-webkit-slider-runnable-track]:h-2',
    '[&::-webkit-slider-runnable-track]:w-full',
    '[&::-webkit-slider-runnable-track]:rounded-full',
    '[&::-webkit-slider-runnable-track]:bg-gray-100',
    // Firefox track styles
    '[&::-moz-range-track]:h-2',
    '[&::-moz-range-track]:w-full',
    '[&::-moz-range-track]:rounded-full',
    '[&::-moz-range-track]:bg-gray-100',
  )}

在 Firefox 中，正在设置边框样式：

但在 Chrome 中不行：

https://play.tailwindcss.com/5lrlPTdgfG

这是为什么以及如何解决它？

注意：我想保留阴影。

Answer 1

我无法解释 Chrome 和 FF 之间的差异，但添加

[&::-webkit-slider-thumb]:border-solid

似乎可以恢复边框。

这看起来相当合乎逻辑，因为外观：没有应用，我想这会删除默认的边框设置。