css 样式化输入类型范围，不同浏览器中的高度差异

soat7uwm  于 11个月前  发布在  其他
关注(0)|答案(2)|浏览(107)

我正在尝试样式化一个“range”类型的输入，以便它在多个浏览器中看起来相同。
我找到了一些有用的资源...
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
http://danielstern.ca/range.css/#/
http://www.cssportal.com/style-input-range/的
.但有一个问题似乎没有得到解决，那就是Firefox和其他浏览器认为输入的高度是轨道和拇指组合的高度（或类似的东西），然而，Chrome似乎只认为轨道的高度是整个输入的高度。
这是我的代码（压缩）：

.container {
  border: 1px solid red;
  background-color: lightgreen;
  margin-top: 10px;
}

p {
  border: 1px solid blue;
  margin: 0;
  padding: 0;
}

input[type=text],
input[type=range] {
  -webkit-appearance: none;
  width: 200px;
  margin: 0;
  padding: 0;
  display: block;
  height: 50px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #ccc;
  border: 1px solid #333;
}

input[type=range]::-webkit-slider-thumb {
  border: 1px solid #333;
  height: 30px;
  width: 8px;
  background: #fff;
  -webkit-appearance: none;
  margin-top: -7px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #ccc;
  border: 1px solid #333;
}

input[type=range]::-moz-range-thumb {
  border: 1px solid #333;
  height: 30px;
  width: 6px;
  background: #fff;
}

个字符
如果你在Chrome和Firefox中运行这个程序，你会发现这两个浏览器对待这个问题的方式是不同的。在Chrome中，输入的背景是白色。
如果我删除input[type=range]上的height: 50px;，浏览器处理高度的方式也有明显的区别。
正如您所看到的，这会影响范围输入之上和之后的标记的相对定位。
我该如何解决这个问题？

css

2条答案

按热度按时间
ttygqcqt

ttygqcqt1#

引用自css-tricks.com

测试支持Firefox 23+、Chrome 6+、IE 10+

你错过了我在评论中提到的一些CSS

.container {
  border: 1px solid red;
  background-color: lightgreen;
  margin-top: 10px;
}
p {
  border: 1px solid blue;
  margin: 0;
  padding: 0;
}
input[type=text] {
  height: 50px;
}
input[type=text],
input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 200px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

  /* CSS is missing in your code  */
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

个字符

赞(0）分享  回复(0）举报  11个月前
xcitsw88

xcitsw882#

我喜欢这三个教程的混合：

  1. https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ -> nice and precise
  2. https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/->彻底和伟大的理解
  3. https://css-tricks.com/sliding-nightmare-understanding-range-input/->非常详细的解释

重要的是要知道，恕我直言，在Firefox中，范围跟踪的宽度取决于字体大小！！

所以这是我完整的CSS部分范围输入（使用一些更少）：

/*range container element*/
.range-slider {
  position: relative;
  width: 120px;
  height: 4em;
  margin: auto;
  margin-bottom: 1em;
  text-align: center;
}

@track-color: @darkblue;
@track-width: 100%;
@track-height: 5px;
@track-radius: 5px;
@thumb-color: @darkblue;
@thumb-height: 20px;
@thumb-width: 10px;
@thumb-radius: 0;
@contrast: 15%;

.range-slider input[type="range"] {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 10px; /* range width firefox!! */
}

.range-slider input[type="number"] {
  border: 1px solid @lightest-grey;
  text-align: center;
  font-size: 1.6em;
  -moz-appearance: textfield;
  appearance: textfield;
  width: 2em;
}

.range-slider input[type="number"]::-webkit-outer-spin-button,
.range-slider input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.range-slider input[type="number"]:invalid,
.range-slider input[type="number"]:out-of-range {
  border: 2px solid red;
}

.range-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/***** Track Styles *****/

/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-runnable-track {
  background: @track-color;
  width: @track-width;
  height: @track-height;
  border-radius: @track-radius;
}

/******** Firefox ********/
input[type="range"]::-moz-range-track {
  background: @track-color;
  width: @track-width;
  height: @track-height;
  border-radius: @track-radius;
}

/***** Thumb Styles *****/

/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -7px; /* Centers thumb on the track */
  background-color: @thumb-color;
  height: @thumb-height;
  width: @thumb-width;
  border-radius: @thumb-radius;
}

/***** Thumb Styles *****/

/***** Firefox *****/
input[type="range"]::-moz-range-thumb {
  border: none; /*Removes extra border that FF applies*/
  border-radius: 0; /*Removes default border-radius that FF applies*/
  background-color: @thumb-color;
  height: @thumb-height;
  width: @thumb-width;
  border-radius: @thumb-radius;
}

/***** Focus Styles *****/

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]:focus::-webkit-slider-thumb {
  background: lighten(@thumb-color, @contrast);
}

/******** Firefox ********/
input[type="range"]:focus::-moz-range-thumb {
  background: lighten(@thumb-color, @contrast);
}

字符串
通过使用“位置：容器中的“相对”和范围输入的“位置：绝对”，我们也可以将两个范围滑块放在彼此的顶部，从而获得上限/下限滑块。

赞(0）分享  回复(0）举报  11个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com