时间戳

首页 > 解决方案 > -webkit- 范围滑块：更改外观或滑块垂直但不是两者？

html - -webkit- 范围滑块：更改外观或滑块垂直但不是两者？

问题描述

我正在使用垂直范围滑块，我想在拇指上使用背景图像。为了改变滑块任何方面的外观，我需要appearance: none;在这两个地方都有：

input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

但要使滑块垂直，我需要

input[type=range] {
-webkit-appearance: slider-vertical;
}

作为一种解决方法，我尝试使用-webkit-transform: rotate(270deg);它使其垂直，并且它可以工作，但我遇到的问题是它不允许我使用高度和宽度的百分比（大概是因为它们在旋转后基本上是切换的）和我需要百分比，因为我需要滑块相对于其他所有内容保持原位，而不是根据用户缩放设置更改大小。需要明确的是，当我旋转它时，设置高度实际上会设置宽度（反之亦然），但只有当你使用 px 时，对它们中的任何一个使用百分比都会完全破坏它。

所以我认为我正在寻找的是其中之一：

  1. 一种在不使用的情况下保持-webkit-appearance: slider-vertical;并能够覆盖范围样式的方法-webkit-appearance: none;
  2. 一种在使用时使用百分比作为高度/宽度的方法-webkit-transform: rotate()

标签： htmlcsssliderrangewebkit

解决方案

推荐阅读