Support » Allgemeine Fragen » CSS Toggle button klappt nicht

  • Gelöst thedoctorcoernel

    (@thedoctorcoernel)


    Hallo zuzsammen,
    in einer Sache bin ich total ratlos:

    Ich möchte einen Schiebe-Button auf meiner Website machen um damit im weiteren Schritt Inhalte dynamisch ein- oder ausblenden.

    Hierzu habe ich den Code von https://www.w3schools.com/howto/howto_css_switch.asp verwendet und um auf Nummer sicher zu gehen, sogar die CSS-Klassen umbenannt, nachdem es nicht geklappt hat. Selbst bei einer neuen Offline-Installation von WordPress komplett im Default-Zustand slidet der Slider nicht, egal ob in Firefox oder Edge oder Chrome. Hat jemand eine Idee, wo dran das liegen kann?
    Der Slider ist direkt oben auf der Seite.

    <div>
      <label class="cv-switch" for="cv-checkbox">
        <input type="checkbox" id="cv-checkbox" value="1" checked />
        <div class="cv-slider cv-round"></div>
      </label>
    </div>
    /* Toggle Slider */
    
    .cv-switch {
      display: inline-block;
      height: 34px;
      position: relative;
      width: 60px;
    }
    
    .cv-switch input {
      display:none;
    }
    
    .cv-slider {
      background-color: #ccc;
      bottom: 0;
      cursor: pointer;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: .4s;
    }
    
    .cv-slider:before {
      background-color: #fff;
      bottom: 4px;
      content: "";
      height: 26px;
      left: 4px;
      position: absolute;
      transition: .4s;
      width: 26px;
    }
    
    input:checked + .cv-slider {
      background-color: #66bb6a;
    }
    
    input:checked + .cv-slider:before {
     transform: translateX(26px);
    }
    
    .cv-slider.cv-round {
      border-radius: 34px;
    }
    
    .cv-slider.cv-round:before {
      border-radius: 50%;
    }
    

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Für CSS-Probleme sind wir hier eigentlich nicht zuständig.

    Wenn ich mir den HTML-Code im Browser ansehe, sieht das anders aus, als das, was du hier gepostet hast:

    <label class="cv-switch" for="cv-checkbox">
     <br> 
     <input type="checkbox" id="cv-checkbox" value="1" checked="">
     <p></p>
     <div class="cv-slider cv-round">
     </div>
     <p> </p>
     </label>

    OMG… danke fürs Augen öffnen!
    Natürlich hatte ich im Quelltext original das, was ich hier gepostet habe, aber die automatischen Absätze von WordPress haben es kaputt gemacht. Gut, dass ich entsprechendes Plugin, um das zu deaktivieren, schon installiert hatte.

    Der Button klappt trotzdem nicht.
    Fügst du das als HTML-Block ein?

    Ja doch, der hat dann geklappt! Ich habe inzwischen weitergearbeitet und noch einige Änderungen gemacht. Was noch nicht klappt, ist, dass der Slider auch was bewirkt. Aber das kommt Stück für Stück!

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)