Ich verwende die folgenden CSS auf meinen Meter-Bars, aber irgendwie funktioniert das Styling nicht auf Safari (siehe Screenshots unten). Ich bin ziemlich neu zu CSS und kopiert unter CSS. Laut Kommentaren sollte dies auf allen Browsern funktionieren. Styling Meter-Bar für Mozilla und Safari

eacda3: Gold

607d8b: dunkelgrün

HTML:

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

CSS: Meter { Höhe: 20px; Breite: 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: Der Screenshot ist der Vergleich zwischen Mozilla und Safari (links) und Chrome, die Art und Weise es soll auf der rechten Seite sehen. Alle Elemente werden angezeigt, aber die Farben und Randradis funktionieren nicht bei den ersten beiden.

Quelle

2016-07-27 Reinier

Sieht wie ein pingeliges Element aus. Wickeln Sie einfach ein div um es herum (in diesem Fall nannte ich es ". Meter"), und wenden Sie die Rahmeneigenschaften mit einem Überlauf: versteckt. Passen Sie dann die Höhe des übergeordneten Containers an das Messgerät an.

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

Quelle

2016-07-27 21:06:04

Einer der größten Standorte fixiert der Menschheit sagt, dass Die Meterleiste wird von Mozilla und Safari unterstützt, wie genau soll ich dieses Wissen für mein Styling-Thema hier nutzen? – Reinier

Meine Frage war nicht klar genug, das Problem ist nur das Styling, also die Farben, Rand und Randradius. – Reinier

Bearbeitete meine Antwort. –

, indem die folgenden für mich gearbeitet:

*::-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; 
}

Diese CSS für Mozilla funktioniert, und Safari auch bekam irgendwie durch diese in die Existenz

Quelle

2016-08-01 20:13:21 Reinier

Styling Meter-Bar für Mozilla und Safari

eacda3: Gold

607d8b: dunkelgrün

Antwort

Verwandte Themen