2014-12-14 19 views
5

Tworzę suwak z dwoma suwakami, aby osiągnąć ten cel, ustawiam jeden rodzaj wejścia nad drugim, suwak działa dobrze, ale jest na nim dziwna linia i nie mogę określić, co to jest:Typ linii wejściowej stylowanie

enter image description here

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 

Czy ta linia jest pseudoelementem lub czymś z elementu input = "range"? Jak mogę go usunąć?

+0

spróbuj dodać 'zarys: 0' do' wejście: focus' – alexr

+0

@Avraam utwórz skrzypce swojego kodu. –

Odpowiedz

1

Dodaj to do wejścia nadpisać domyślne style przeglądarki:

&::focus 
    outline: none 
    -moz-box-shadow: none 
    -webkit-box-shadow: none 
    box-shadow: none 
Powiązane problemy