CSS - Input Range (Zahlen entfernen) z.B. 1 bis 10 - MS Edge und Firefox

[DualityMind]

Hallo CB

Habe wieder ein komisches Problem und zwar habe ich einen Anzeige Fehler auf einer Seite von meiner Webseite :-)!

Ich habe ein Bewertungs-System von 1 bis 10 ! Benutze dafür <input type=range class=erscheinungsbild> etc...!

Jetzt habe ich ausserhalb des Webseiten Bereichs, Rechts am Rand eine Zahl 10 und im Include File von der Seite hat es vor dem Range (Panel) eine 1.

Ich will aber, dass es keine Zahlen anzeigt ! Kurioserweise zeigt es im Firefox keine Zahlen an. Ausser, bei dem Neuen Edge und Google Chrome :-( !

Hier noch ein wenig CSS Code:

#slide:before {
height:32px;
color: yellow;
}
#slide:after {
background-Color: DFEFFF;
height:32px;
}

Das Problem ist mir eigentlich schon vor ein paar Monaten aufgefallen, aber ich konnte es damals wegbringen, weiss aber nicht mehr wie ich das gemacht habe :-(! Komischerweise war es damals beim Firefox und jetzt beim neuen Edge und Chrome :-)!

Es gibt irgendeinen Trick es zu entfernen. Hat jemand einen Plan ?

LG

 

[Bagbag]

Mit mehr Code/Kontext könnte man dir eindeutig besser helfen.

 

[DualityMind]

Mit mehr Code/Kontext könnte man dir eindeutig besser helfen.

Ja, OK ! Hier ein wenig Code:

<input id=slide name=bewertung type=range min=1 max=10 value=5 oninput=displayValue(event) >

Das ist die Input im PHP Code ! Es hat eine Bewertung von 1 bis 10 Stufen ! Mit OnInput zeigt er noch zusätzlich eine Grafik an von 1 bis 10 (immer verschiedene) :-)!

Eigentlich liegt es nicht am PHP (meiner Meinung nach) eher ein Fehler in der CSS !

Wie gesagt, ich habe es damals mit irgendeinem CSS Code geschafft und es war weg :-( !

LG

 

[kim88]

Hast du eventuell einen Link zur Seite? dann kann man das komplett mal ansehen.

 

[Bagbag]

Ich meine damit eher, dass du uns das gesamte Bild zeigen sollst, bspw. mit einem Link zu deiner Website.

Wenn ich <input type="range" min="1" max="10" value="5"> irgendwo hinzufüge, ist da keine Zahl. Egal ob Firefox oder Chrome. Eine CSS-Klasse mit background-color und height wird daran auch sicher nichts ändern.

PS: Warum nutzt du so viele ! ?!?!

 

[DualityMind]

Hallo

Hier ist ein Beispiel (benutze aber MS Edge oder Google Chrome)
Android Link

Man sieht Rechts ziemlich in der Mitte Rot Geschrieben "10" und am Panel eine "1" :-(!

Aber bitte keine Diskussionen über meine Webseite :-() !

LG

 

[Bagbag]

Ich würde es mir ja anschauen, aber das darf ich nicht.

 

[DualityMind]

Hallo

Bitte De-Aktiviere den AdBlocker für meine Webseite :-) !

Dann kannste Laden down :-) !

LG

 

[Bagbag]

Nein. Aber in der Sekunde, in der das nicht da ist, kann ich keine Zahl erkennen.

 

[DualityMind]

Nein. Aber in der Sekunde, in der das nicht da ist, kann ich keine Zahl erkennen.

Hmm... Versuche mal den Android-Link (wie oben geschrieben)! Man sieht die Zahl eben Rechts am Rand mit rotem Hintergrund! Du musst aber den neuen MS Edge dazu benutzen oder den Google Chrome, dann sollte es auch bei Dir anzeigen :-)!

LG

 

[Bagbag]

Das habe ich. Aber da habe ich weder eine Bewertung, noch eine Zahl gesehen.

 

[kim88]

Habe mir die Seite angesehen und kann dir helfen.

Die gelbe 1 kommt nicht vom PHP Script sondern über ein CSS Pseudo Element (:before) - komme später darauf zurück.

Wenn ich es richtig im Kopf habe sollten HTML Input Elemente keine Pseude Elemente haben - dies sollten nur Container wie div, span, p, etc haben - deswegen wird es wohl im Firefox nicht angezeigt - weil er die CSS Regel wohl einfach ignoriert. Chromium rendert das CSS offenbar doch - obwohl es kein HTML Standard ist - so kommt es zum unterschiedlichen Verhalten.

Nun zur Lösung:

In deiner style.css - genauer in dem File: http://gratisgames24.ch/multicolor-slider/assets/style.css
Ab Zeile 57: hast du folgenden Code:

#slide:before {
  content: attr(min);
  position: absolute;
  color: yellow;
  font-size: 1rem;
}

Dieser Code rendert dir dort die gelbe Zahl. Meiner Ansicht nach, kannst du den ersatzlos streichen - hab echt keine Ahnung wozu das brauchst. Alternativ kannst du auch ein "display: none" hinzufügen.

Damit sollte das Problem behoben sein.

 

[DualityMind]

Habe mir die Seite angesehen und kann dir helfen.

Dieser Code rendert dir dort die gelbe Zahl. Meiner Ansicht nach, kannst du den ersatzlos streichen - hab echt keine Ahnung wozu das brauchst. Alternativ kannst du auch ein "display: none" hinzufügen.
Damit sollte das Problem behoben sein.

Yep, hat super funktioniert. Danke vielmals, war wirklich sehr freundlich von Dir :-)! Konnte auf allen 3 Spiele-Seiten so die Zahlen wegbringen (display:none)!

Super, jetzt wieder ein Problem weniger :-), das nächste wartet wahrscheinlich schon :-)!

Danke Kim88 und BagBag :-))) ! Gute Nacht, und träumt was schönes :-)!

LG
p.s. Natürlich allen gute Gesundheit ! Wer den Artikel in 10 Jahren mal liest, hoffe das der Virus endlich vorbei ist :-) !