• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Input Range Chrome anders wie bei FireFox

bosko

Member
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:
<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>

Habe schon viel gegoogelt aber kein lösungsweg gefunden, wo liegt da der Fehler...

Gruß
 
Zurück
Oben