Здравствуйте. Не могу правильно стилизовать под chrome.
В firefox получаю правильный результат:
А в chrome не получается сделать... Результат из chrome c попытками добавления префиксов webkit:
Подскажите, как правильно сделать такое же отображение, как и для firefox?
input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #AECADA;
margin-right: 15px;
height: 4px;
border-radius: 4px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4eb1ea), to(#4eb1ea));
background-image: -o-linear-gradient(#4eb1ea, #4eb1ea);
background-image: linear-gradient(#4eb1ea, #4eb1ea);
background-repeat: no-repeat;
}
input[type=range]::-moz-range-thumb {
background: transparent;
border-color: transparent;
color: transparent;
border: 4px solid #4eb1ea;
height: 0.3125rem;
width: 0.3125rem;
border-radius: 100%;
background: #ffffff;
cursor: pointer;
margin-top: -0.25rem;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #ffffff;
border-color: transparent;
color: transparent;
border: 4px solid #4eb1ea;
height: 0.3125rem;
width: 0.3125rem;
border-radius: 100%;
cursor: pointer;
margin-top: -0.25rem;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 0.25rem;
cursor: pointer;
background: #AECADA;
border-radius: 0.25rem;
margin-top: -1.25rem;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0.25rem;
cursor: pointer;
background: #AECADA;
border-radius: 0.25rem;
margin-top: -1.25rem;
}
input[type="range"]::-moz-range-progress {
background-color: #4eb1ea;
}
input[type="range"]::-webkit-progress-value {
background-color: #4eb1ea;
}
Простой
