Director
Hallo,
ich versuche gerade eigene Bedienelemente für ein HTML5 Video zu entwerfen. Das ganze klappt inzwischen auch ziemlich gut, allerdings habe ich ein paar Probleme das ganze in allen Browsern gleich aussehen zu lassen.
Dieser Artikel hat die wichtigsten Fragen geklärt, aber einige Kleinigkeiten bleiben noch, auf die ich keine Antwort finde.
Hier erstmal der relevante Code:
1. Wenn ich den Track des range inputs mit einer border versehen will, dann liegt diese in Chrome und IE direkt am Track an, wie man es erwartet, in Firefox hat sie aber nach oben und unten einen gewissen Abstand zum Track. Dieser bleibt auch bestehen, wenn man margin und padding auf 0 setzt. Ich hab keine Ahnung wo das herkommen könnte. Dazu kommt, dass dieser Abstand verschwindet, wenn der focus auf dem input liegt. Dadurch wandert der dann etwa 20 Pixel nach unten, was natürlich nicht wirklich schön aussieht. Ist er nicht mehr im Fokus wandert er dann wieder nach oben.
2. Für den IE gibt es den nützlichen Befehl input[type=range]::-ms-fill-lower, mit dem man den Bereich hinter dem Play-Head anders stylen kann als den Rest. Also um in meinem Fall den Bereich des Tracks, der schon abgespielt wurde, grau einzufärben statt weiß.
Kann man dieses Verhalten irgendwie auch in den anderen Browsern erreichen?
Vielleicht stand ja schon mal jemand vor einem ähnlichen Problem
ich versuche gerade eigene Bedienelemente für ein HTML5 Video zu entwerfen. Das ganze klappt inzwischen auch ziemlich gut, allerdings habe ich ein paar Probleme das ganze in allen Browsern gleich aussehen zu lassen.
Dieser Artikel hat die wichtigsten Fragen geklärt, aber einige Kleinigkeiten bleiben noch, auf die ich keine Antwort finde.
Hier erstmal der relevante Code:
HTML:
<input type="range" id="seek-bar" value="0" min="0" max="100">
CSS:
/*Custom Player Controls*/
input[type=range]{
-webkit-appearance: none;
/*required for proper track sizing in FF*/
width: 100%;
padding:0;
}
input[type=range]::-webkit-slider-runnable-track{
width: 100%;
height: 3px;
background: #fff;
border: none;
}
input[type=range]::-moz-range-track{
width: 100%;
height: 3px;
background: #fff;
border: none;
}
input[type=range]::-ms-track {
width: 100%;
height: 3px;
background: #fff;
border: none;
margin:0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #666;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 3px;
width: 15px;
background: #55acee;
-webkit-border-radius:0;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 3px;
width: 15px;
background: #55acee;
-moz-border-radius:0;
}
input[type=range]::-ms-thumb {
border: none;
height: 3px;
width: 15px;
background: #55acee;
}
input[type=range]:focus {
outline: none;
height:3px;
border:none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
height:3px;
}1. Wenn ich den Track des range inputs mit einer border versehen will, dann liegt diese in Chrome und IE direkt am Track an, wie man es erwartet, in Firefox hat sie aber nach oben und unten einen gewissen Abstand zum Track. Dieser bleibt auch bestehen, wenn man margin und padding auf 0 setzt. Ich hab keine Ahnung wo das herkommen könnte. Dazu kommt, dass dieser Abstand verschwindet, wenn der focus auf dem input liegt. Dadurch wandert der dann etwa 20 Pixel nach unten, was natürlich nicht wirklich schön aussieht. Ist er nicht mehr im Fokus wandert er dann wieder nach oben.
2. Für den IE gibt es den nützlichen Befehl input[type=range]::-ms-fill-lower, mit dem man den Bereich hinter dem Play-Head anders stylen kann als den Rest. Also um in meinem Fall den Bereich des Tracks, der schon abgespielt wurde, grau einzufärben statt weiß.
Kann man dieses Verhalten irgendwie auch in den anderen Browsern erreichen?
Vielleicht stand ja schon mal jemand vor einem ähnlichen Problem
