问题样式范围输入拇指

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" />

Answer 2

如果您能够编辑曲目，但不能编辑拇指，那么请确保您拥有 -webkit-appearance: none;在这两个地方覆盖默认行为。

input[type=range] {
    -webkit-appearance: none; <------------------------------------ REQUIRED
}

input[type=range]::-webkit-slider-runnable-track {
    background: /* ...change color with background property... */;
    /* ...my custom edits...*/
}

input[type=range]:hover::-webkit-slider-runnable-track {
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; <------------------------------------ REQUIRED
    height: /* ..manually set height greater than 0... */ <-------- REQUIRED
    width: /* ..manually set width greater than 0... */ <---------- REQUIRED
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

input[type=range]:hover::-webkit-slider-thumb {
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

（请注意，这在 Chrome 中有效，但您可以根据需要用逗号分隔其他属性，例如 input[type=range]::-moz-range-thumb 和 input[type=range]::-ms-thumb，以考虑其他浏览器）

Answer 3

似乎是以下选择器导致了问题，因此您的样式无法正常工作，请将其删除，样式将适用：

::-webkit-slider-thumb

Here 是更新的 Codepen。

更新答案

需要对所有浏览器中的范围输入应用多种样式以覆盖其基本外观。声明以下样式后，您将能够设置范围切换器的样式。

请查看以下内容并将其添加到您的代码中：

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

请参阅此link 到更新的 Codepen。

Answer 4

所以样式没有应用到拇指的问题是你还必须添加

input[type=range] {
  -webkit-appearance: none;
}

.. 拇指现在是一个红色方块。

Answer 5

1. 隐藏输入 - 这会隐藏拇指和轨迹

2. 根据需要设置拇指样式

3. 为曲目设置样式

警告：轨道与拇指顶部对齐。我使用负边距来纠正这个问题。如果有人有更好的方法来做到这一点，那就太好了......

input[type=range] {
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: red;
  height: 20px;
  width: 20px;
  margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ddd;
}

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

CODEPEN

Good resource here for ensuring browser compatibility.