Styling Meter-bar For Mozilla And Safari

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

Solution 1:

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

Solution 2:

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);
}