Custom Round Checkbox(codepen.io)

almost 4 years ago from Matt Smith, Web Developer

  • Matt SmithMatt Smith, almost 4 years ago

    You could add one using a pseudo class, e.g., .round label:before { content: "This is a the label"; }. Position it as you like.

    0 points
    • Hamish TaplinHamish Taplin, almost 4 years ago

      That's not accessible at all :(

      7 points
      • Thomas Michael SemmlerThomas Michael Semmler, almost 4 years ago

        there are some other techniques for that that don't require a label element. You can always work with a selector like .checkbox:checked + .anything.

        1 point
        • Hamish TaplinHamish Taplin, almost 4 years ago

          If you don't have a label element, it's not accessible.

          0 points
          • Thomas Michael SemmlerThomas Michael Semmler, almost 4 years ago

            let me rephrase it:

            You can use a different element instead of the label element for the visual part of the checkbox, or radio button or whatever. If you position your checkbox right above the new visual checkbox, and you just set the opacity to 0, it can still be clicked, so you don't have to use the label element to trigger the clicking, and you are free to use the label element as it is supposed to be used.

            https://codepen.io/thefairystamp/pen/EXgQdN

            Sorry, I just assumed this is regular knowledge.

            1 point