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

如果您能够编辑曲目，但不能编辑拇指，请确保您具有-webkit-appearance：无；在这两个地方覆盖默认行为。

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 2

请查看以下答案

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

隐藏输入 - 隐藏拇指并跟踪
按照
设定音轨风格

警告：轨道与拇指顶部对齐。我用负余量来纠正这个问题。如果某人有更好的方法做到这一点会很好......

＆＃13;

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;
}

＆＃13;

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

＆＃13;

<强> CODEPEN

Good resource here for ensuring browser compatibility.

Answer 4

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

set list … # Leaving out the details of how you build the list set result [eval exec $list] puts "result is \"$result\""

Here是一个更新的Codepen。

更新了答案

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

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

::-webkit-slider-thumb

请参阅此link更新的Codepen。

Answer 5

因此，为什么样式没有应用于拇指的问题是你还必须添加

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

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

麻烦造型范围输入拇指

5 个答案: