Pseudo class :checked doesn't work

Unchecked and hover works, but not checked for some reason. The form collect the values upon checking them, but they won’t display as checked.

I’m using a 3rd party plug-in (a form builder) which generates lots of HTML code, and I’m not able to change this (I just modify with CSS). I tried to strip it down somewhat for this topic.

Here’s the testing-page:
Checked state = Box is supposed to stick with a blue color.

And then the code:
But it won’t display as it does on my site (no images etc), so no reason to “Run” it there.

What am I missing in the :checked CSS lines?
Any help appreciated.

Looking at the fiddle, your classes don’t match.
In html you have class="uifm-dcheckbox-item-chkval"
But in the css you have .uifm-dcheckbox-item-viewport {

Thank you, but no CSS is taking effect at all by changing to uifm-dcheckbox-item-chkval. Wouldn’t it be more logical that I just missed something with the CSS? I mean the unchecked and hovering states work… Coding isn’t my expertise though, so I have no idea.

I’ve spent the last 4-5 days trying to figure this out, and getting pretty desperate since no reply from the plug-in developer and at other help forums. :confused:

Looking at the actual page, the html generated by the builder is confusing to say the least.
I think some scripting is applying the styling in-line which makes things very difficult to change or override.
Pseudo classes don’t work with in-line styling, just one of many reasons to not use in-line styling.

Yes. I may have to resort to their ordinary checkbox fields, and try to style these instead. Let’s try with the jsfiddle pages only.
This is how I’d like it to work:
With the plug-in generated HTML:
Can you see what I’m missing?

And yes, the example is radio buttons, but it’s the image appearance I’m trying to achieve so I suspect it doesn’t matter right now.

Update: The :checked state isn’t possible to modify through this plug-in according to the developer. But I bought some custom coding and the feature to upload images for unchecked / hover / checked will be implemented. :slight_smile: The plug-in is Zigaform, if anyone in the future would look for some similar solution.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.