0

I created my own checkbox because now I can just use images as checkboxes (no styling needed). To make this work I toggle a <div> between two classes (checked & unchecked). This works perfectly, but my one problem is when you check back and forth a few times then the text around the <div> starts highlighting it self.

How can I stop the text around the <div> from being highlighted?

Here is an example of what happens when you check/uncheck a few times: enter image description here

Here is a stackblitz to play with:

https://stackblitz.com/edit/angular-lgxkgk

Freddy Bonda
  • 1,189
  • 6
  • 15
  • 33
  • _“[…] (no styling needed)”_ - and accessibility _terrible_ … seriously, this is how it should _not_ be done. – misorude Nov 26 '18 at 08:48
  • @misorude It is not my fault some html elements are basically impossible to style (have you tried styling an – Freddy Bonda Nov 26 '18 at 08:56
  • Options and Checkboxes/Radio buttons are two different things. The solutions for “custom” checkboxes/radio buttons that still use the actual form elements plus labels (and therefor have way better usability, than trying to “fake” this using divs), have existed for years now … – misorude Nov 26 '18 at 09:09

0 Answers0