[英]HTML5/CSS3 Input Range Styling
因此我使用HTML5 / CSS3為輸入范圍滑塊創建了一種樣式。 除Firefox中的填充百分比(在可拖動按鈕右側填充的位)外,其他所有選項都工作正常。 它適用於Chrome。 我已經嘗試了所有可能有人幫助我使其在Firefox中正常運行的方法。 這是我所擁有的:
CSS:
.my-retirement-sliders input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
border:none;
height: 6px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 3px solid #fff;
height: 10px;
width: 10px;
}
.my-retirement-sliders input[type="range"]{
-webkit-appearance: none;
border-radius: 5px;
height: 6px;
background-color: #444;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 3px solid #fff;
border-radius:10px;
height: 15px;
width: 15px;
}
一點點的JS:
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
});
因此,我現在也設法為Firefox進行了修復:D DAY DAYS! 所以我的CSS看起來像這樣
/* Firefox */
.my-retirement-sliders input[type='range']::-moz-range-track {
border:none;
background:transparent;
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:10px;
height: 13px;
width: 13px;
box-shadow:black 2px 2px 10px;
}
/* Chrome and Opera */
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 20px;
width: 20px;
box-shadow:black 1px 1px 5px;
}
/* IE */
.k-ie .my-retirement-sliders input[type="range"]{
height:81px;
top:10px;
position:relative;
width:300px;
margin-left: 10px;
display: inline-block;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-track {
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-lower {
background: #94A14E;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-upper {
background: #C5C5C5;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-thumb {
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 15px;
width: 15px;
box-shadow:black 1px 1px 5px;
overflow:auto;
}
和JS看起來像這樣:
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderRetAge").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val*100 + '% , #C5C5C5 ' + val*100 + '%)');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderPostRetExpPerc").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$(this).css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.