I've implemented the following CSS on my meter bars but for some reason, the styling isn't showing up correctly in Safari (refer to the screenshots below). I'm relatively new to CSS and simply copied the code provided. Based on the comments, it should work across all browsers.
eacda3: gold
607d8b: dark green
Here's the HTML snippet:
<meter min="0" value="<%=info["home_prob"]%>" max="100" id ='H<%=id%gt;'>
</meter> <span> <%=info["home_prob"]%>%</span></p>
This is the corresponding CSS code:
Update: The screenshot illustrates the discrepancy between Mozilla and Safari (left) compared to Chrome, which displays as intended on the right. All elements are visible but the colors and border radius aren't rendering properly on the former two browsers.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);
}