Looking to style a range input consistently across different browsers?
There are some great resources that have been helpful, such as:
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
However, there is one issue that seems to remain unaddressed. Firefox and other browsers interpret the height of the input differently compared to Chrome.
In my condensed code snippet:
.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>It's evident when testing in Chrome and Firefox that they handle this formatting disparity. Removing height: 50px; on input[type=range] also showcases differences in browser behavior.
This discrepancy impacts the positioning of tags surrounding the range input.
Is there a solution to ensure consistent styling regardless of the browser? How can I navigate around this challenge?