Type input style

Question

I create a slider with two handlers to ensure that I put one range of the input type on top of the other, the slider works fine, but there is a strange line on it, and I can’t understand what it is:

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 

Is this line a pseudo-element or something like an input element = "range"? How to remove it?

Answer 1

Add this for input to overwrite the default browser styles:

 &::focus outline: none -moz-box-shadow: none -webkit-box-shadow: none box-shadow: none