【发布时间】：2018-07-31 21:57:31
【问题描述】：
我创建了一个带有两个处理程序的滑块，以实现我将一个输入类型范围放在另一个上，滑块工作正常，但上面有一条奇怪的线，我不知道它是什么：
HTML：
<section data-range-slider
class="range-slider"
ng-model="range"
min="0"
max="max">
<input list="numbers" type="range" ng-change="_which = 0" ng-model="_model[0]" min="0" max="1800" step="1" >
<input type="range" ng-change="_which = 1" ng-model="_model[1]" min="0" max="1800" step="1">
</section>
SASS：
section.range-slider
overflow: hidden
position: relative
width: 200px
height: 35px
input
pointer-events: none
position: absolute
overflow: hidden
left: 0
top: 0
width: 200px
outline: none
height: 18px
&::-webkit-slider-thumb
pointer-events: all
position: relative
z-index: 1
outline: 0
&::-moz-range-thumb
pointer-events: all
position: relative
z-index: 10
-moz-appearance: none
background: linear-gradient(to bottom, #ededed 0%, #dedede 100%)
width: 11px
&::-moz-range-track
position: relative
z-index: -1
background-color: rgba(0, 0, 0, 0.15)
border: 0
&:last-of-type::-moz-range-track
-moz-appearance: none
background: none transparent
border: 0
ul.from-to
display: block
list-style-type: none
margin-top: 10px
font-family: Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif
font-size: 11px
li
margin-bottom: 1px
label
background-color: rgba(0, 0, 0, 0)
height: 24px
line-height: 24px
display: inline-block
width: 60px
padding: 0 10px
float: left
font-size: 9px
color: rgba(0, 0, 0, 0)
text-transform: uppercase
input
border: 1px solid rgba(0, 0, 0, 0.1)
padding: 0 8px
height: 24px
line-height: 24px
outline: none
这条线是伪元素还是来自 input type="range" 元素的东西？如何删除它？
【问题讨论】：
-
尝试将
outline: 0添加到input:focus -
@Avraam 请为您的代码创建一个小提琴。