我试图设置类型"范围"的输入。所以它在多个浏览器中看起来都一样。
我找到了一些我用过的简洁资源......
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;
}

<div class="container">
<p>
Some text...
</p>
<input type="range" />
<p>
Some more text...
</p>
</div>
<div class="container">
<input type="text">
</div>
&#13;
如果您在Chrome和Firefox中运行此功能,您会发现两个浏览器对此的处理方式不同。在Chrome中,输入获得白色背景。
如果删除height: 50px;
上的input[type=range]
,则浏览器处理高度的方式也存在明显差异。
如您所见,这会影响范围输入上方和之后的标记相对位置。
我该如何解决这个问题?
答案 0 :(得分:3)
你错过了我在评论中提到的一些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;
}
<div class="container">
<p>
Some text...
</p>
<input type="range" />
<p>
Some more text...
</p>
</div>
<div class="container">
<input type="text">
</div>