✔ Browserspez. input[...] mit CSS-Klasse kombinieren

[TIMS_Ralf]

Hallo Leute,
habe HTML5-Form-Elemente, die ich browserspezifisch mit CSS-Klassen kombinieren möchte.

Ohne Klassenangabe funktioniert es, wie z.B.:

/* Firefox */
input[type=range]::-moz-range-track
{  ... }

/* IE */
input[type=range]::-ms-track
{  ... }

/* Chrome / Webkit  */
input[type=range]::-webkit-slider-runnable-track
{  ... }

Nun möchte ich verschieden gestaltete RANGE-Form-Felder einsetzen, was normalerweise ja doch mit vorangesetzter CSS-Klasse angegeben wird, also z.B. für die CSS-Klasse design1 / design2:

/* Firefox */
.design1 input[type=range]::-moz-range-track
{  ... }
.design2 input[type=range]::-moz-range-track
{  ... }

/* IE */
.design1 input[type=range]::-ms-track
{  ... }
.design2 input[type=range]::-ms-track
{  ... }

/* Chrome / Webkit  */
.design1 input[type=range]::-webkit-slider-runnable-track
{  ... }
.design2 input[type=range]::-webkit-slider-runnable-track
{  ... }

Das HTML dazu:

<INPUT TYPE="RANGE" MIN="0" MAX="50" STEP="10" CLASS="design1" ID="feld1">
<INPUT TYPE="RANGE" MIN="0" MAX="50" STEP="10" CLASS="design2" ID="feld2">

Sobald ich im CSS die CSS-Klasse davor setze, verliert er die Einstellungen, wenns diese browserspezifischen Einstellungen braucht ( anonsten gehts ja )?

Wie kann kann die CSS-Klasse berücksichtigt werden? Oder zielführend anders gefragt:
Wie kann ich unterschiedlich gestaltete RANGE-Felder realisieren?

Danke Euch für Tipps!
Gruß Ralf

 

[SpiceLab]

Das kann nicht funktionieren, weil es sich bei

.design1 input[type=range]

um einen Nachfahrenselektor (https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenselektor) handelt.

Entweder

input.design1[type=range]

oder

input[type=range].design1

oder gar

input[type=range][class=design1]

 

[TIMS_Ralf]

Hallo Spicelab,
... super und vielen Dank! Hadder auch verstanden

Grüße aus dem Harz,
Ralf