I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar.
One way I have attempted to change the background of the track bar with jQuery is by employing the following code:
$('#video-controls').css("background", "rgb(0,110,135)");
This targets the division containing the video track bar with the id 'video-controls' and changes its background color.
However, this approach does not affect the color of the slider button itself, which remains green.
In my CSS stylesheet, the slider is defined as shown below:
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;
}
I have also attempted to change the background property for the slider button using:
$("input[type=range].slider::-moz-range-thumb").css("background", "rgb(0,110,135)");
Unfortunately, this method did not produce the desired outcome. How can I successfully alter the background css property for the slider button?