代码之家 › 专栏 › 技术社区 › Will

如何解决Chrome和Edge的拇指滑块垂直对齐问题?

microsoft-edge google-chrome css html

Will · 技术社区 · 6 年前

我想要拇指滑块,它比轨迹大,中间对齐。

我剥离默认样式:

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

并添加新样式:

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #009fda;
cursor: pointer;
}

在镀铬中,这会使拇指偏离中心。

但它对于Edge似乎是正确的:

如果我添加边距上限以进行补偿:

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #009fda;
cursor: pointer;
**margin-top: -7px;**
}

它在镀铬中进行了修正:

但打破了它的边缘:

是否有一种方法可以应用于仅为Chrome应用边距顶部属性?或者以其他方式达到同样的目的?

请参阅CSS arcticale https://css-tricks.com/sliding-nightmare-understanding-range-input/ 有关详细信息:

在垂直方向上,拇指与Firefox中的曲目居中对齐,边缘似乎居中对齐,尽管在相同情况下的多次测试中,我得到了非常令人困惑的不同结果,并且在设置webkit外观后,它的边框框顶部与Chrome中的曲目内容框顶部对齐:在实际输入和拇指上都没有,因此我们可以设置滑块的样式。

虽然Chrome的决定一开始看起来很奇怪,但在大多数情况下都很烦人,最近甚至有助于打破。。。Edge(但稍后会有更多信息),它背后有一些逻辑。默认情况下,Chrome中轨道的高度是由拇指的高度决定的,如果我们这样看,顶部对齐似乎不再是完全疯狂的。

然而,我们通常需要一个比轨道高度大的拇指,并且与轨道中间对齐。我们可以在::-webkit滑块拇指伪设置的样式中更正Chrome与边距顶部的对齐。

不幸的是,这样我们打破了边缘的垂直对齐。这是因为Edge现在还应用了通过::-webkit滑块拇指设置的样式。

1 回复 | 直到 4 年前

gregwhitworth 6 年前

我们添加了对的支持 -webkit 前缀由于其在网络(主要是移动)上的流行,并通过支持它们,这为我们的用户提供了更好的体验。解决问题的方法是使用 -ms-thumb 由于Chrome不支持此功能:

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #009fda;
  cursor: pointer;
  margin: 7px; /* alignment fix for Chrome */
}

input[type="range"]::-ms-thumb {
  margin: 0; /* Reset margin in Edge since it supports -webkit-slider-thumb as well */
}

这将导致拇指的中心对齐,如您所愿,您可以在此处看到: http://jsbin.com/bawuhofuqa/edit?html,css,output

希望这会有所帮助,如果您还有任何问题,请告诉我。

推荐文章