Jak zmienić kolor ikony używanej jako slider-thumb (CSS)

Wed, 20 Jan 2021 19:23:20 +0000

Modyfikuję slidera i udało mi się nawet zmienić ikonę (format svg), którą chwytamy do zmiany wartości (slider-thumb). Używana ikona jest czarna i chciałbym zmienić jej kolor na inny (w zależności od slidera, np. czerwony, niebieski).

To co do tej pory ogarnąłem w css:

input[type=range]::-webkit-slider-thumb 
{
    -webkit-appearance: none;
    width: 25px;
    height: 25px;    
    background: url('../img/shield.svg');    
    cursor: pointer;
}

Niestety nie mogę zmienić tego koloru poprzez background-color bo zmieni się tylko obramowanie czarnej ikony, a ona pozostaje (tak, zgadłeś) czarna. Czy jest to w ogóle możliwe?

Forum Pasja Informatyki - Najnowsze z tagiem slider-thumb

Jak zmienić kolor ikony używanej jako slider-thumb (CSS)