Wie ändere ich die Hintergrundeigenschaft des Eingabeelements?

Question

Ich habe einen HTML5-Videoplayer mit einer Track-Leiste am unteren Rand in CSS gestylt. Ich möchte jQuery verwenden, um den Stil der Spurleiste zu ändern.

Mit jQuery kann ich den Hintergrund der Panhardstab Stil mit:

$('#video-controls').css("background", "rgb(0,110,135)"); 

Da die Videospur Bar in einer Abteilung mit einem id 'Video-Kontrollen' genannt wird.

Allerdings bleibt der Schieberegler selbst die Originalfarbe (grün).

In CSS wird der Schieber wie folgt definiert:

input[type=range].slider::-moz-range-thumb 
{ 
    box-shadow: 0.8px 0.8px 1.9px rgba(0, 0, 62, 0.67), 0px 0px 0.8px rgba(0, 0, 88, 0.67); 
    border: 1.9px solid rgba(0, 30, 0, 0.57); 
    height: 16px; 
    width: 32px; 
    border-radius: 4px; 
    background: #a4b93f; 
    cursor: pointer; 
} 

ich versucht habe

$("input[type=range].slider::-moz-range-thumb").css("background", "rgb(0,110,135)"); 

Aber es macht nichts. Wie ändere ich die Hintergrund CSS-Eigenschaft?

Answer 1

Ich bevorzuge die Verwendung .addClass('other-background-color') und style die Steuerelemente über CSS.

Aber der Fragesteller muss dieses Client-basierte tun. Also jQuery und Pseudo Selektoren funktionieren nicht.

Eine Idee ist, die Klasse mit anderem Hintergrund "on the fly", und fügen Sie diese über jQuery .addClass('user-background')

Hier sehen Sie, was ich Sinn mit "on the fly" zu erstellen: Create a CSS rule/class with jQuery at runtime

Answer 2

Sie brauche dafür kein JavaScript. Ihr CSS scheint soweit in Ordnung zu sein. Um zu vermeiden, dass der Schieberegler in seinem ursprünglichen Zustand bleibt, müssen Sie Ihrem Browser mitteilen, dass er die Standardeinstellungen nicht mehr verwenden soll.

Für Firefox würden Sie hinzufügen:

input[type=range], 
input[type=range]::-moz-range-thumb { 
    -moz-appearance: none; 
} 

On Chrome würden Sie verwenden:

input[type=range], 
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
} 

EDIT

Um dynamisch Daumen Farbe zu setzen, können Sie Verwenden Sie JavaScript, um Ihr CSS zu ändern. Ein Beispiel könnte so aussehen. https://jsfiddle.net/tet9fm6m/

document.styleSheets[0].addRule('input[type=range]::-webkit-slider-thumb', 'background: green'); 

Dazu einfach die Hintergrundfarbe in Ihrer CSS-Datei leer lassen. Andernfalls würde Ihr JavaScript-Setup überschrieben werden.