Winter Winter - 2 months ago 17
CSS Question

styling input type range, height differences in different browsers

I'm trying to style an input of type "range" so that it looks the same in multiple browsers.

I've found some neat resources that I have used ...

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

http://danielstern.ca/range.css/#/

http://www.cssportal.com/style-input-range/

... but there is one issue that does not seem to be addressed. That is that Firefox and other browsers consider the height of the input to be the height of the of the track and the thumb combined (or something similar), however, Chrome seems to only consider the height of the track to be the height of the entire input.

This is my code (condensed):



.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>





If you run this in Chrome and Firefox you will see that the two browsers treat this differently. In Chrome the input gets a white background.

If I remove the
height: 50px;
on the
input[type=range]
, there is also an obvious difference between the way the browsers treat the height.

As you can see, this affects how the tags above and after the range input are positioned relatively.

How do I work around this?

Answer

Reference from css-tricks.com

Support Firefox 23+, Chrome 6+, IE 10+ as per testing

You have missed some CSS I have mention in comment

.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>

Comments