CSS Input Range Chrome anders wie bei FireFox

**bosko** · 31-05-2018, 20:45

hoi,

Habe mir einen kleinen input range erstellt in Vertikaler Ausrichtung,
die CSS habe ich so weit auf FireFox angepasst was Optisch auch Passt,
nun wollte ich dies für Chrome erweitern, aber das geht nun gar nichts:

HTML-Code:

<style type="text/css">
.range {
	width: 186px;
	align: center;
	height: 340px;
	background-image: url('track.png');
	vertical-align: top;
}
.myRange {
	vertical-align: top;
	background: transparent;
	margin-top: 30px;
	margin-left: 85px;
	height: 275px;
}
.myRange[orient=vertical] {
	writing-mode: bt-lr;
	-webkit-appearance: slider-vertical;
}
.myRange::-moz-range-track {
	border: 0;
	width: 186px;
	height: 340px;
	background-color: rgba(0,0,0,0);
}
.myRange::-moz-range-thumb {
	border: 0;
	width: 128px;
	height: 32px;
	background-image: url('thumb.png');
    box-shadow: 2px 2px 2px #000000, 0px 0px 5px #0d0d0d;
	background-color: rgba(0,0,0,0);
	cursor: pointer;
}

.myRange::-webkit-slider-thumb {
    -webkit-appearance: slider-vertical;
    margin-left: -6px;
	border: 0;
	width: 128px;
	height: 32px;
	background-image: url('thumb.png');
	background-color: #f5f5f5;
	cursor: pointer;
}
.myRange::-webkit-slider-runnable-track {
	margin-right: 110px;
	width: 9px;
	cursor: pointer;
	background: #000000;
	border-radius: 9px;
	border: 0;
}
.myRange:focus::-webkit-slider-runnable-track {
	background: #000000;
    border: 0;
}

</style>
<div class="range">
<input type="range" class="myRange" max="100" min="0" orient="vertical">
</div>
</div>