Bereich ändern Slider Handle Farbe (On Click)

<div id="slider"> 
    <br><span>0</span> 
    <span style="margin-left: 3.3%">100</span> 
    <span style="margin-left: 9.8%">300</span> 
    <span style="margin-left: 16.4%">600</span> 
    <span style="margin-left: 16.2%">900</span> 
    <span style="margin-left: 15.7%">1200</span> 
    <span style="margin-left: 13.3%">1500</span> 
</div>

Ich verwende Standard jquery Bereich Schieberegler. Wenn der Griff angeklickt wird, ändert sich der Griffkopf in einen blauen (wie im Bild gezeigt). Ich füge diese rohe HTML in wordpress Thema hinzu. Es funktioniert gut bei lokalen Tests (ohne Wordpress-Thema). Gibt es trotzdem die Farbe beim Klick zu überschreiben. Blau und mein Website-Thema geht nicht gut.Bereich ändern Slider Handle Farbe (On Click)

Normale Bei dem Klicken

Quelle

2017-04-26 Iz Dev

Haben Sie versucht, das Element in Ihrem Debug-Panel Ihres Browsers zu überprüfen? Die meisten anständigen Browser können Sie den CSS-Selektor in Ihre Zwischenablage kopieren. Dann können Sie damit Ihre Hintergrundeigenschaften anwenden. –

Können Sie das CSS, das Sie zum Rendern verwendet haben, einfügen? Auf diese Weise können wir Ihnen effektiv mitteilen, was Sie hinzufügen müssen und wo. Es klingt wie das Wordpress-Thema CSS überschreibt, welche Selektor Sie für das Handle gesetzt haben. Versuchen Sie, am Ende Ihrer css-Eigenschaftserklärung! Oder versuchen Sie, den Selektor spezifischer zu machen. –

Siehe folgenden Stift:

https://codepen.io/barrychapman/pen/vmyjLR

Wenden Sie einfach die background-color CSS-Eigenschaft mit !important zum Selektor:

#slider-range > span.ui-slider-handle:active { 
    background-color: #0B0 !important; 
}

Und du solltest gut gehen. Überprüfen Sie den Stift auf Ergebnisse.

Quelle

2017-04-26 03:39:29

** Hinweis: Die Core-Demo wird direkt von http://jqueryui.com/slider/#range abgerufen –

Mit devtools bemerken Sie die CSS-Änderungen, die angewendet werden, wenn Sie auf das Handle klicken. Notieren Sie sich die CSS-Zeilennummer, wenn Sie darauf geklickt haben und dass Sie diese Regel ändern müssen. Es ist wahrscheinlich, dass diese sein würde:

.ui-state-active, 
 
.ui-widget-content .ui-state-active, 
 
.ui-widget-header .ui-state-active, 
 
a.ui-button:active, 
 
.ui-button:active, 
 
.ui-button.ui-state-active:hover { 
 
\t border: 1px solid #000;/*changed this to black*/ 
 
\t background: #000;/*changed this to black*/ 
 
\t font-weight: normal; 
 
\t color: #ffffff; 
 
}

Wenn es außer Kraft gesetzt wird, dann natürlich höhere Selektoren wie body am Anfang und !important als letztes Mittel.

Quelle

2017-04-26 03:39:32

Dies wird nicht erreichen, was das OP sucht. –

Interessant, warum sollte es nicht? Probieren Sie es einfach auf Ihrem Stift und es hat funktioniert. –

Da Sie nicht auf den Griff des Schiebereglers ausgerichtet sind. –

Bereich ändern Slider Handle Farbe (On Click)

Antwort

Verwandte Themen