CSS accent-color quirk

 I have been using 'accent-color' in CSS to set the background color of checkboxes and radio buttons.


I found one quirk.


I have a set of checkboxes with a CSS animation taking the 'accent-colors' through a rainbow. The background colors start off all in sync. But if I check and un-check some boxes then the colors get out of sync. It is as though un-checking a box restarts the animation afresh.


There are more tips at: bbingo.xyz/t

Comments

Post a Comment

Popular posts from this blog

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/
Read more

RCS 'identification marker' comes in useful

Image
 I forgot which version of my JavaScript game I 'minimised' to produce the latest version. Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code. I had used the '$Revision$' marker. RCS is the free source control system that came with my old Linux system. There are more tips at:  bbingo.xyz/techtips/
Read more

Marking up code examples

Image
 I now put code examples inside a '<pre><code>' block I was using '&nbsp;' to indent lines. I set the '<code>' to 'display:block' so I can indent it with 'margin-left'. I start the example code immediately after the '<code>' tag to avoid an extra newline. I put everything in a 'div' with contenteditable="true" and  spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line. I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/
Read more