html - 较小的输入类型范围:活动滑块在 iOS Safari 上并不总是有效
问题描述
我有一个标准的 html5 范围输入(又名滑块),当滑块处于活动状态时,我使滑块拇指(手柄)变小。这在我需要支持的所有网络浏览器中都可以正常工作,iOS 上的 Safari 除外(仅在 iPhone 上尝试过)。
一旦我更改了 :active 类中的宽度和高度 css 属性,就很难抓住滑块句柄来更改值。它有时有效,但并非总是如此。滑块处于活动状态,因此大小发生变化,但滑块“卡住”。当我尝试滑动它时,它不会跟随我的手指。
这是一个带有两个滑块的 CodePen,顶部的滑块完美无缺,底部的滑块有时很难在 Safari 上“抓取” https://codepen.io/tobbe_lundberg/pen/wvervQx
这是它的代码:
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 32px;
margin-top: 40px;
}
input[type="range"]::-webkit-slider-runnable-track {
background: pink;
height: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 56px;
width: 56px;
background: pink;
margin-top: -24px;
}
input[type="range"]:active::-webkit-slider-thumb {
height: 56px;
width: 56px;
margin-top: -24px;
}
input.resize[type="range"]:active::-webkit-slider-thumb {
height: 24px;
width: 24px;
margin-top: -10px;
}
<input type="range" min="0" max="100" step="1"/>
<input class="resize" type="range" min="0" max="100" step="1"/>
如何仅使用 CSS 使调整大小效果也适用于 Safari?
解决方案
编辑:我解决它的方法可能对你不起作用(并且有点像黑客),是让拇指在视觉上更小,但实际上并没有更小。您可以使用近乎透明的边框(或与背景颜色相同的边框)来抵消可见部分的缩小尺寸。
太长了,无法发表评论,但你解决了这个问题吗?我遇到的问题看起来和你的完全一样,不同之处在于我的滑块拇指很薄。
看到您的问题,我尝试利用相反的方法作为解决方案:在活动时使滑块拇指更大。当谈到更容易抓住拇指时,这实际上就像一个魅力。
不过我注意到了一件事,我认为这可能是您所看到的问题背后的原因之一:更改滑块拇指实际上会改变滑块的范围,从而改变滑块的位置。如果你把拇指做得很大,你会注意到整个范围变得很短的距离。
推荐阅读
- sql - SQL - 将行合并为一个?
- django - Django:创建模型管理器不起作用
- ios - 如何等到云套件数据在iOS13中快速与核心数据同步
- java - 如何在 spark/DataFrame 上过滤不可为空的行
- html - Excel VBA - HTML 值为零时出现错误 91 问题
- tags - Amazon PA API5 - 附属公司的新产品链接结构?
- flutter - Flutter 放 AnimatedIcon 而不是 AppBar 前导图标
- c# - 为我的应用程序运行 Wix 安装程序后,即使在删除文件夹后也无法创建/写入文件/文件夹
- outlook - 从 Outlook 365 日历中完全删除某些内容
- linux - 如何在 linux 中显示来自 mlocate 的最新更新?