Pseudo class :checked doesn't work

HTML & CSS
1

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: http://www.mixningskonsulten.com/zigaform-test2/
Checked state = Box is supposed to stick with a blue color.

And then the code: https://jsfiddle.net/xofLsdyu/
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.

2

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 {

3

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:

4

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.

5

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: https://jsfiddle.net/501cyotq/
With the plug-in generated HTML: https://jsfiddle.net/q9s7nx5h/
Can you see what I’m missing?

6

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.

7

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.

8

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