我设置了一个 HTML input type=range 元素的样式,它在 Chrome 中以我想要的方式工作,但它在 Safari 中呈现得非常糟糕。当您移动轨迹球时,它不会显示或部分呈现。加载似乎也需要很长时间。有谁知道这里发生了什么?
轨道和球上的 CSS 样式(减去媒体查询中的微小变化:
input[type=range] {
-webkit-appearance:none;
-webkit-flex-basis:100%;
}
input[type=range]::-webkit-slider-runnable-track {
width:10rem;
height: 1rem;
background: #fff;
border: 2px solid orange;
border-radius: 10px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 3rem;
width: 3rem;
border-radius: 50%;
background: orange;
margin-top: -1.2rem;
border:2px solid #fff;
cursor: pointer;
}
input[type=range]:focus {
outline: none;
}
还有整个事情的 jsfiddle:http://jsfiddle.net/agentemi1y/srp7r3ue/1/
最佳答案
关于jquery - HTML5 范围元素在 Safari 中呈现不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25962791/