Range Progress - Chrome

[woak0 0]

Bem, no Mozilla tem esse elemento para definir a cor de background do valor do range, por exemplo:

 

input[type=range]::-moz-range-progress{

background: #1E2D47;

}

Gostaria de saber qual é o elemento para o chrome.

[Patrick Corrêa Muniz 0]

Boa noite, se você deseja apena modificar a cor do background você pode fazer da seguinte forma:

input[type="range"] { -webkit-appearance: none; background-color: #1E2D47; }

No entanto na minha opinião não fica legal, você pode utilizar esta estilização para que fique com uma melhor aparência:

/**Estiliza a barra */
input[type="range"] {-webkit-appearance: none; background-color: #1E2D47; height: 15px; width: 170px; border-radius: 5px; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);} 
/**Estiliza o botão */
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; width:20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
}

Bom, espero que solucione o seu problema com input type range. Boa noite e boa sorte.

[woak0 0]

Boa noite, se você deseja apena modificar a cor do background você pode fazer da seguinte forma:

input[type="range"] { -webkit-appearance: none; background-color: #1E2D47; }

No entanto na minha opinião não fica legal, você pode utilizar esta estilização para que fique com uma melhor aparência:

/**Estiliza a barra */
input[type="range"] {-webkit-appearance: none; background-color: #1E2D47; height: 15px; width: 170px; border-radius: 5px; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);} 
/**Estiliza o botão */
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; width:20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
}

Bom, espero que solucione o seu problema com input type range. Boa noite e boa sorte.

Amigo, você me ajudou bastante, mas gostaria de saber sobre a cor da "linha" atras da "bola"

 

http://i.imgur.com/bi4Dvpi.png