Styling meter-bar for mozilla and safari

Question

I am using the following css on my meter-bars but somehow the styling does not work on safari (see below screenshots). I am pretty new to css and copied below css. According to the commenting this should work on all browsers.

eacda3: gold

607d8b: dark green

HTML:

<meter min="0" value="<%=info["home_prob"]%>" max="100" id ='H<%=id%>'>
    </meter> <span> <%=info["home_prob"]%>%</span></p>

CSS: meter { height: 20px; width: 80%; }

meter::-webkit-meter-bar {
    background: #607d8b;
    border: 4px solid #485563;
    border-radius: 9px;
}

meter::-webkit-meter-optimum-value {
    border-radius: 9px;
    background: #eacda3; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

Edit: the screenshot is the comparison between Mozilla and Safari (left) and Chrome, the way it is supposed to look on the right. All elements are showing but the colors and border radis do not work on the first two.

Answer 1

Looks like a fussy element. Simply wrap a div around it (in this case, I called it ".meter"), and apply the border properties to that, with an overflow: hidden. Then match the height of the parent container with the meter.

.meter {
  display: inline-block;
  height: 20px;
  overflow: hidden;
  border: 2px solid #485563;
  -moz-border-radius: 10px;
  /*Firefox*/
  -webkit-border-radius: 10px;
  /*Safari, Chrome*/
  border-radius: 10px;
}
.meter meter {
  height: 20px;
}
.meter meter:-webkit-meter-bar {
  background: #607d8b;
}
.meter meter:-webkit-meter-optimum-value {
  border: 2px solid #000;
  -moz-border-radius: 10px;
  /*Firefox*/
  -webkit-border-radius: 10px;
  /*Safari, Chrome*/
  background: #eacda3 !important;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #eacda3, #d6ae7b);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #eacda3, #d6ae7b);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

Answer 2

Adding the following worked for me:

*::-moz-meter-bar {
    -moz-appearance: meterchunk;
    display: inline-block !important;
    float: none !important;
    position: static !important;
    width: 100%;
    height: 12px;
    overflow: visible !important;
    background: #607d8b;
    border: 4px solid #485563;
}
:-moz-meter-optimum::-moz-meter-bar {
    background: linear-gradient(to left, #eacda3 , #d6ae7b);
    border-radius: 9px;
}

This CSS works for Mozilla, and safari also somehow got fixed by this