html - 麻烦样式范围输入拇指

Question

我正在尝试使用以下内容在 html 范围输入中执行一些基本样式:

HTML

<input type="range" min="0" value="50" max="100" step="1" />

CSS

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance : none;
  background : red;
  height : 20px;
  width : 20px;
}

我也做了一个 Codepen你可以看看。

你会注意到，如果你注释掉 background , height和 width样式拇指确实消失了。所以有些东西正在起作用。但是应用样式后，我希望它是 20px X 20px红方格。但是，唉，我只看到默认的拇指样式。

Answer 1

请检查以下答案

input[type=range] {
   -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
   width: 300px;
   height: 5px;
   background: #ddd;
   border: none;
   border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   background: goldenrod;
   margin-top: -4px;
}
input[type=range]:focus {
   outline: none;
}
 input[type=range]:focus::-webkit-slider-runnable-track {
   background: #ccc;
}
input[type=range] {
   /* fix for FF unable to apply focus style bug  */
   border: 1px solid white;
   /*required for proper track sizing in FF*/
   width: 300px;
}
 input[type=range]::-moz-range-track {
   width: 300px;
   height: 5px;
   background: #ddd;
   border: none;
   border-radius: 3px;
}
 input[type=range]::-moz-range-thumb {
   border: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
   outline: 1px solid white;
   outline-offset: -1px;
}
 input[type=range]:focus::-moz-range-track {
   background: #ccc;
}

/* for ie */

input[type=range]::-ms-track {
   width: 300px;
   height: 5px;

/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
   background: transparent;

/*leave room for the larger thumb to overflow with a transparent border */
   border-color: transparent;
   border-width: 6px 0;

/*remove default tick marks*/
   color: transparent;
}
input[type=range]::-ms-fill-lower {
   background: #777;
   border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
   background: #ddd;
   border-radius: 10px;
}
input[type=range]::-ms-thumb {
   border: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
   background: #888;
}
input[type=range]:focus::-ms-fill-upper {
   background: #ccc;
}

<input type="range" min="0" value="50" max="100" step="1" />