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.

score 1 · Answer 1 · answered Aug 01 '16 at 20:13

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

Steven Ventimiglia · Answer 2 · 2016-07-27T22:03:32.960

0

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

edited Jul 27 '16 at 22:03

answered Jul 27 '16 at 21:06

Steven Ventimiglia

886
1
11
19

1

One of the greatest sites in the existence of mankind says that the meter bar is supported by mozilla and safari, how exactly should I use this knowledge for my styling issue here? – Reinier Jul 27 '16 at 21:11
1

My question was not clear enough, the problem is purely the styling, so the colours, border and border radius. – Reinier Jul 27 '16 at 21:24
Furthermore, the colors don't seem to be managed by CSS. Those are the elements core properties that are defined by optimum high/low values, like a stop light. Green, yellow, and red. – Steven Ventimiglia Jul 27 '16 at 22:10
Thanks for your help. In a first attempt I did not manage to fix with a div around the meter element, but your answer seems feasible, will do some further testing tomorrow – Reinier Jul 27 '16 at 22:45

score 0 · Answer 3 · answered May 19 '22 at 12:29

I did work on styling a element for some time now and finally have a solution. It seems to work at least the current versions of Chrome, Safari and Firefox.

The trick was to set border-color: transparentfor the meter element, this somehow fixes Safari not recognizing the pseudo element styles.

https://codepen.io/receter/pen/dydWjKR

<div class="usageMeter">
    <meter max="100" value="50"></meter>
</div>

.usageMeter {
    border: 2px solid #eee;
    border-radius: .5rem;
    padding: .2rem;
    box-sizing: border-box;
}

.usageMeter meter {
    background: none;
    width: 100%;
    height: .5rem;
    display: block;
    border-color: transparent; /* Needed for Safari */
}

.usageMeter meter::-webkit-meter-bar {
    height: .5rem;
    border: 0;
    background-color: transparent;
    background-image: none;
}

.usageMeter meter::-webkit-meter-optimum-value {
    border-radius: .5rem;
    background-color: lime;
    background-image: none;
    transition: all .15s ease;
}

.usageMeter meter:-moz-meter-optimum::-moz-meter-bar {
    border-radius: .5rem;
    background-color: lime;
    background-image: none;
    transition: all .15s ease; /* Does not seem to work */
}

Styling meter-bar for mozilla and safari

eacda3: gold

607d8b: dark green

3 Answers3

Linked