подскажите как убрать белые уголки ползунка
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #A4A1A1; margin:8px; }
input[type=range].range {
-webkit-appearance: none;
width: 250px;
margin: 25px 5px;
}
input[type=range].range:focus {
outline: none;
}
input[type=range].range::-webkit-slider-runnable-track {
width: 100%;
height: 7.1px;
cursor: pointer;
box-shadow: 1.1px 1.1px 2.5px #000000, 0px 0px 1.1px #0d0d0d;
background: rgba(222, 222, 222, 0.61);
border-radius: 50px;
border: 1.5px solid rgba(1, 0, 1, 0.23);
}
input[type=range].range::-webkit-slider-thumb {
box-shadow: 1.2px 1.2px 2.1px rgba(0, 0, 0, 0.98), 0px 0px 1.2px rgba(13, 13, 13, 0.98);
border: 2.5px solid rgba(60, 60, 60, 0.7);
height: 26px;
width: 26px;
border-radius: 50px;
background: #B0B0B0;
cursor: pointer;
-webkit-appearance: none;
margin-top: -10.95px;
}
input[type=range].range:focus::-webkit-slider-runnable-track {
background: rgba(233, 232, 232, 0.61);
}
input[type=range].range::-moz-range-track {
width: 100%;
height: 7.1px;
cursor: pointer;
box-shadow: 1.1px 1.1px 2.5px #000000, 0px 0px 1.1px #0d0d0d;
background: rgba(223, 221, 222, 0.61);
border-radius: 50px;
border: 1.5px solid rgba(1, 0, 1, 0.23);
}
input[type=range].range::-moz-range-thumb {
box-shadow: 1.2px 1.2px 2.1px rgba(0, 0, 0, 0.98), 0px 0px 1.2px rgba(13, 13, 13, 0.98);
border: 2.5px solid rgba(40, 40, 40, 0.7);
height: 26px;
width: 26px;
border-radius: 50px;
background: #c8c8c8;
cursor: pointer;
}
input[type=range].range::-ms-track {
width: 100%;
height: 7.1px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].range::-ms-fill-lower {
background: rgba(213, 210, 212, 0.61);
border: 1.5px solid rgba(1, 0, 1, 0.23);
border-radius: 50px;
box-shadow: 1.1px 1.1px 2.5px #000000, 0px 0px 1.1px #0d0d0d;
}
input[type=range].range::-ms-fill-upper {
background: rgba(223, 221, 222, 0.61);
border: 1.5px solid rgba(1, 0, 1, 0.23);
border-radius: 50px;
box-shadow: 1.1px 1.1px 2.5px #000000, 0px 0px 1.1px #0d0d0d;
}
input[type=range].range::-ms-thumb {
box-shadow: 1.2px 1.2px 2.1px rgba(0, 0, 0, 0.98), 0px 0px 1.2px rgba(13, 13, 13, 0.98);
border: 2.5px solid rgba(40, 40, 40, 0.7);
height: 26px;
width: 26px;
border-radius: 50px;
background: #c8c8c8;
cursor: pointer;
height: 7.1px;
}
input[type=range].range:focus::-ms-fill-lower {
background: rgba(223, 221, 222, 0.61);
}
input[type=range].range:focus::-ms-fill-upper {
background: rgba(233, 232, 232, 0.61);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script>
function znachenie() {
polzunok = document.getElementById("polzunok").value;
$("#itog").text(polzunok);
}
</script>
<input class="range" type="range" min="0" max="100" step="1" value="50" id="polzunok" oninput="znachenie()">
<br>
itog: <span id="itog" >?</span>
</body>
</html>