input type = Bereich immer Marge in Chrome, Firefox

Question

Ich habe ein Formular:

<div class="ttSliderFrmCnt"> 
    <form ref="form" class="ttSliderForm"> 
     <input max="480" min="30" name="slider" type="range" value={this.props.totalSeconds}/> 
    </form> 
</div> 

ich versucht, einige benutzerdefinierte Stile hinzufügen, folgende this Css-tricks tutorial:

// Hide the default slider 
input[type=range] { 
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ 
    width: 100%; /* Specific width is required for Firefox. */ 
    background: transparent; /* Otherwise white in Chrome */ 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
} 

input[type=range]:focus { 
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ 
} 

input[type=range]::-ms-track { 
    width: 100%; 
    cursor: pointer; 

    /* Hides the slider so custom styles can be added */ 
    background: transparent; 
    border-color: transparent; 
    color: transparent; 
} 

// Style the thumb 
/* Special styling for WebKit/Blink */ 
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 1px solid $darkDivider; 
    height: $bodyTextSize; 
    width: $bodyTextSize; 
    border-radius: 50%; 
    background: $accentColor; 
    margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
} 

/* All the same stuff for Firefox */ 
input[type=range]::-moz-range-thumb { 
    border: 1px solid $darkDivider; 
    height: $titleTextSize; 
    width: $titleTextSize; 
    border-radius: 50%; 
    background: $accentColor; 
} 

/* All the same stuff for IE */ 
input[type=range]::-ms-thumb { 
    border: 1px solid $darkDivider; 
    height: $titleTextSize; 
    width: $titleTextSize; 
    border-radius: 50%; 
    background: $accentColor; 
} 

input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 4px; 
    background: $accentColor; 
    border-radius: 2px; 
    border: 0.2px solid $darkDivider; 
} 

input[type=range]:focus::-webkit-slider-runnable-track { 
    background: $accentColor; 
} 

input[type=range]::-moz-range-track { 
    width: 100%; 
    height: 4px; 
    background: $accentColor; 
    border-radius: 2px; 
    border: 0.2px solid $darkDivider; 
} 

input[type=range]::-ms-track { 
    width: 100%; 
    height: 4px; 
    background: transparent; 
    border-color: transparent; 
    border-width: 2px 0; 
    color: transparent; 
} 
input[type=range]::-ms-fill-lower { 
    background: $accentColor; 
    border: 0.2px solid $darkDivider; 
    border-radius: 2px; 
} 
input[type=range]:focus::-ms-fill-lower { 
    background: $accentColor; 
} 
input[type=range]::-ms-fill-upper { 
    background: $accentColor; 
    border: 0.2px solid $darkDivider; 
    border-radius: 2px; 
} 
input[type=range]:focus::-ms-fill-upper { 
    background: $darkSecondaryText; 
} 

Die verwendeten Variablen sind entweder Größen in px oder Farbdefinitionen und sollte keine Rolle spielen.

Jetzt eine seltsame Sache passiert, wenn ich überprüfen diese in Chrom ich einen Spielraum erhalte ich nicht auf den Eingang definiert haben selbst:

input[type="range" i] { 
    -webkit-appearance: slider-horizontal; 
    color: rgb(144, 144, 144); 
    padding: initial; 
    border: initial; 
    margin: 2px; 
} 

Wo kommt das her und wie kann ich sie überschreiben?

Answer 1

Dies ist das User Agent Stylesheet Ihres Browsers. Wenn Sie die Regel überschreiben möchten, definieren Sie einfach die Regel in Ihrem CSS.

input[type="range"] { 
 
    margin: 0px; 
 
}

<div class="ttSliderFrmCnt"> 
 
    <form ref="form" class="ttSliderForm"> 
 
     <input max="480" min="30" name="slider" type="range" value={this.props.totalSeconds}/> 
 
    </form> 
 
</div>