入力タイプ=レンジなっマージン、Firefoxの

Question

は私の形式は次のとおりです。

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

私は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; 
} 

使用される変数はpxのいずれかのサイズです、または色の定義が重要ではありません。これはどこから来ないとどのように私はそれを上書きすることができ

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

を：

今、好奇心旺盛なことは、私はクロームでこれを検査したときに、私は、入力自体に定義されていませんでしたマージンを取得し、どうなりますか？

Answer 1

これは、ブラウザのユーザーエージェントスタイルシートです。ルールをオーバーライドする場合は、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>