CSS擬似要素を正しく配置する

Question

div内に入力型の範囲があり、擬似要素 'before'を円として使用しています。それは開始位置で親指のようになるために私の意図は、次のとおりです。次のCSSで

<div class="range"> 
    <input type="range" name="" class="progress" value="0" max="100" min="0"/> 
</div> 

：私は、次のHTMLを持っている。ここ

.range::before{ 
    content: ''; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    background-color: #69b6d5; 
} 

が機能fiddle

私ですbefore要素を範囲の先頭と同じ位置にすることです。

Answer 1

1. は.range::beforeとinputにinline-blockを追加しましたし、vetically vertical-align: middleを使用してそれらを整列しました。

2. inputからwidth: calc(100% - 15px)の幅を設定します。この15ピクセルは.range::before要素の幅です。

3. transform: translate(100%, 0)

を使用して、黄色のドットを超える.range::beforeを持参のデモは、以下を参照してください：

/* RANGE */ 
 

 
input[type=range] { 
 
    -webkit-appearance: none; 
 
    margin: 10px 0; 
 
    width: calc(100% - 15px); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0; 
 
    border: none; 
 
} 
 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 3px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    box-shadow: 0px 0px 0px #000000; 
 
    background: #FFE000; 
 
    border-radius: 7px; 
 
    border: 0px solid #FFE000; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
    box-shadow: 0px 0px 0px #FFE000; 
 
    border: 2px solid #FFE000; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 15px; 
 
    background: #FFE000; 
 
    cursor: pointer; 
 
    -webkit-appearance: none; 
 
    margin-top: -7px; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
    background: #FFE000; 
 
} 
 
input[type=range]::-moz-range-track { 
 
    width: 100%; 
 
    height: 3px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    box-shadow: 0px 0px 0px #000000; 
 
    background: #FFE000; 
 
    border-radius: 7px; 
 
    border: 0px solid #FFE000; 
 
} 
 
input[type=range]::-moz-range-thumb { 
 
    box-shadow: 0px 0px 0px #FFE000; 
 
    border: 2px solid #FFE000; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 15px; 
 
    background: #FFE000; 
 
    cursor: pointer; 
 
} 
 
input[type=range]::-ms-track { 
 
    width: 100%; 
 
    height: 3px; 
 
    cursor: pointer; 
 
    animate: 0.2s; 
 
    background: transparent; 
 
    border-color: transparent; 
 
    color: transparent; 
 
} 
 
input[type=range]::-ms-fill-lower { 
 
    background: #FFE000; 
 
    border: 0px solid #FFE000; 
 
    border-radius: 14px; 
 
    box-shadow: 0px 0px 0px #000000; 
 
} 
 
input[type=range]::-ms-fill-upper { 
 
    background: #FFE000; 
 
    border: 0px solid #FFE000; 
 
    border-radius: 14px; 
 
    box-shadow: 0px 0px 0px #000000; 
 
} 
 
input[type=range]::-ms-thumb { 
 
    box-shadow: 0px 0px 0px #FFE000; 
 
    border: 2px solid #FFE000; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 15px; 
 
    background: #FFE000; 
 
    cursor: pointer; 
 
} 
 
input[type=range]:focus::-ms-fill-lower { 
 
    background: #FFE000; 
 
} 
 
input[type=range]:focus::-ms-fill-upper { 
 
    background: #FFE000; 
 
} 
 
.range { 
 
    position: relative; 
 
    display: table; 
 
    margin: 0 auto; 
 
    width: 50vw; 
 
} 
 
.range::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    transform: translate(100%, 0); 
 
    width: 15px; 
 
    height: 15px; 
 
    -moz-border-radius: 15px; 
 
    -webkit-border-radius: 15px; 
 
    border-radius: 15px; 
 
    background-color: #69b6d5; 
 
}

<div class="range"> 
 
    <input type="range" name="" class="progress" value="0" max="100" min="0" /> 
 
</div>

私はこれについてあなたの意見を知ってみましょう。ありがとう！

Answer 2

それは少しハックですが、どのように.range::beforeにこれを追加することについて：

.range::before { 
    /* ... other css */ 
    position: absolute; 
    margin-top: 11px; 
} 

JSFiddle