oliverseimo: Kundenbewertung Sterne nur mit CSS

Hallo, ich möchte eine Kundenbewertung erstellen mit 5 Sternen, je nachdem wie zufrieden man war, kann man dann so viele Sterne geben wie man möchte.

Ich möchte dass, wenn man mit der Maus z.B. den dritten Stern „anhovert“, dass dieser und sowohl der erste und der zweite Stern eine andere Farbe bekommen. usw…

Was ich bis jetzt gelesen habe, macht man das mit JavaScript. In meinem Fall ist das aber leider nicht möglich. Ich muss nur mit CSS auskommen.

Ich hätte da an Geschwisterelemente mit + und ~ gedacht, hatte aber bis jetzt keinen Erfolg. Auch nth-child habe ich schon probiert.

Ist es möglich, in so etwas nur mit HTML und CSS zu realisieren?

Danke für euer Hilfe!

akzeptierte Antworten

  1. Tach!

    Ist es möglich, in so etwas nur mit HTML und CSS zu realisieren?

    Ja.

    dedlfix.

    1. Moin,

      position: absolute? Ehrlich? 😱

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    2. @@dedlfix

      Ist es möglich, in so etwas nur mit HTML und CSS zu realisieren?

      Ja.

      ?? Und welches davon nun genau?

      Das erste in meinen SERPs schon mal nicht. Nicht bedienbar.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Tach!

        Ist es möglich, in so etwas nur mit HTML und CSS zu realisieren?

        Ja.

        ?? Und welches davon nun genau?

        Das kann ich nicht entscheiden, weil ich zur Umgebung des Probleminhabers nichts weiß und damit nicht weiß, welches davon passt. Ich sehe es auch nicht als meine Aufgabe an, eine genaue Lösung herauszufinden.

        Wie lauten deine ersten beiden Fragen? Da kamen bei mir nur die Satzzeichen an.

        dedlfix.

        1. @@dedlfix

          Wie lauten deine ersten beiden Fragen? Da kamen bei mir nur die Satzzeichen an.

          Die erste war „Häh?“, die zweite „Häääh?“

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Hello,

    Ich möchte dass, wenn man mit der Maus z.B. den dritten Stern „anhovert“, dass dieser und sowohl der erste und der zweite Stern eine andere Farbe bekommen. usw…

    Nur hovert oder auch auswählt?

    Sind deine Sterne verkappte Checkboxen oder Radios? Dann sollte das mMn gehen.

    Wie sorgst Du dafür, dass man den dritten Stern nicht vor dem ersten auswählen kann und den ersten nicht nach dem dritten wieder abwählen kann?

    Liebe Grüße
    Tom S.

    --
    Es gibt nichts Gutes, außer man tut es
    1. Jeder einzelne Stern ist mit einer Seite verlinkt, auf der man dann bestätigt, dass man soviele Sterne geben möchte. Also sollen nur beim Hover die Sterne links davon die Farbe mitändern.

      Das alles soll so einfach gehalten werden, da das in einer Email umgesetzt werden soll. Ich weiß nicht, ob es dann in den Clients auch umsetzbar ist, mir geht es nur mal um die Möglichkeit bzw. um eine Idee der Umsetzung.

  3. Moin,

    Man muss nicht die position absolute-Bombe auswerfen. siehe kleines Beispiel

    Tausche einfach die Positionen im Quelltext und richte die Elemente grafisch aus (position:relative). Dann der ~ selector, und schon klappt das. Um das ganze barrierefrei zu halten. kannst du ein entsprechendes Alt und title Tag zur Erklärung vergeben.

    Grundsätzlich wird die getauschte Reihenfolge niemandem auffallen.

    Gruß Bobby

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    1. Danke, hat mir sehr geholfen! 😀

  4. @@oliverseimo

    Hallo, ich möchte eine Kundenbewertung erstellen mit 5 Sternen […]
    Ist es möglich, in so etwas nur mit HTML und CSS zu realisieren?

    Ja, das ist es. Ich hatte mal vor einiger Zeil mal was gebastelt.

    Hatte damals aber eine Anzeige des aktuell fokussierten Elements bei Tastaturbedienung vergessen. Eben nachgeholt.

    Den kompilierten CSS-Code erhältst du durch Click auf 🔽, View Compiled CSS.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. @@Gunnar Bittersmann

      Hatte damals aber eine Anzeige des aktuell fokussierten Elements bei Tastaturbedienung vergessen. Eben nachgeholt.

      Oder nicht vergessen, sondern weggelassen, weil sich die Browser unterschiedlich verhalten: im Firefox sieht’s gut aus, im Chrome kommt auch bei Mausbedienung ein roter Rahmen um den angeclickten Stern.

      Vielleicht schafft :focus-ring zukünftig Abhilfe?

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. Hej Gunnar,

      schöne Lösung!

      Marc

      1. @@marctrix

        schöne Lösung!

        Welche, die mit oder die ohne Outline?

        Die eine ist unschön, weil sie in manchen Browsern eine Outline zeigt, wo keine hingehört. Die andere ist unschön, weil sie in allen Browsern keine Outline zeigt, wo eine hingehört.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hej Gunnar,

          @@marctrix

          schöne Lösung!

          Welche, die mit oder die ohne Outline?

          Die eine ist unschön, weil sie in manchen Browsern eine Outline zeigt, wo keine hingehört. Die andere ist unschön, weil sie in allen Browsern keine Outline zeigt, wo eine hingehört.

          Die mit outline - ich mag es lieber deutlich, statt verborgen. Die outline habe ich nur bei geklickten Sternen gesehen und habe nichts dagegen, darauf besonders klar hingewiesen zu werden, dass mein Klick offenbar erkannt wurde (auch wenn damit noch nichts irgendwo angekommen und gespeichert ist - aber ich habe das Gefühl, alles ist ok und meine Arbeit war nicht umsonst).

          Marc