如何通过css样式合并两个输入类型=范围?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何通过css样式合并两个输入类型=范围?相关的知识,希望对你有一定的参考价值。

我有两个输入type =“range”。我想合并这两个。

我想制作双滑块,但是,如果我将两个元素放在另一个上面,只有顶部的一个接受鼠标点击。我不想使用任何外部库来做到这一点。我是用css风格做的,但主要的问题是它在Mozilla浏览器和IE中不起作用。它只适用于chrome浏览器,我认为这是因为指针事件:无;它没有在Mozilla浏览器中运行。任何的想法?

**css :**
.price-slider {
    position: relative;
    width: 400px;
    margin: 0 auto 20px;
    height: 35px;
    text-align: center;
}

.price-slider input {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 15px;
    width: 100%;
    outline: none;
    height: 18px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
}

.price-slider input::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
    height: 24px;
    widows: 24px;
    border-radius: 12px;
    background-color: white;
    border: 2px solid black;
    -webkit-appearance: none;
}

**html:**
<div class="price-slider">
    <input value="0" min="0" value="0" max="100" step="1" type="range" />
    <input value="100" min="0" value="100" max="100" step="1" type="range" />
</div>

答案

这应该可以解决你的问题但是为了获取信息,pointer-events属性也可以在firefox中运行,没有任何前缀。

.price-slider {
  position: relative;
  width: 400px;
  margin: 0 auto 20px;
  height: 35px;
  text-align: center;
}

.price-slider input {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 15px;
  width: 100%;
  outline: none;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
}

.price-slider input::-webkit-slider-thumb {
  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
  height: 24px;
  widows: 24px;
  border-radius: 12px;
  background-color: white;
  border: 2px solid black;
  -webkit-appearance: none;
}

.price-slider input::-moz-range-thumb {
  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
  height: 24px;
  widows: 24px;
  border-radius: 12px;
  background-color: white;
  border: 2px solid black;
  -moz-appearance: none;
}

input::-moz-range-track {
  background: #ccc;
}
<div class="price-slider">
    <input value="0" min="0" value="0" max="100" step="1" type="range">
    <input value="100" min="0" value="100" max="100" step="1" type="range">
</div>

以上是关于如何通过css样式合并两个输入类型=范围?的主要内容,如果未能解决你的问题,请参考以下文章

web前端,输入选择框选中状态下的css样式如何改

css如何在输入框里添加图片和文字?

如何使用css3实现响应式布局

怎样在css样式表中加入自己的图片

13 个非常有用的 Python 代码片段

如何在 Chrome 开发者工具中查看范围输入拇指的样式?