The tab offers 4 pseudo class sectors, including :hover and allows you to see/edit the styling of those states via the VISUAL EDITOR.
This is quite handy and i was looking for some way to add :checked to that list, but there doesn’t seem to be any options for that.
Am i missing something obvious, or is this just not offered?
The 4 pseudo classes in the visual UI apply to a: links. Checked is a pseudo class for inputs.
ok, so how can i turn on the same display for inputs?
remeber you have to manually create (write the class) if you want the buttons to work.
You just can select an element, click on a pseudo class state and start styling. This will produce nothing.
If the element has a class of “.element” you have to manually create the “.element:hover” pseudo class yourself, then the button will work.
I askes this as a feature request.
i have created the class “.element:checked” but there is no button in the ACTIVE tab to toggle to see how that styling affects my page like i can do with the other state buttons.
i would like to add this functionality to PG, either by some settings tweek or a formal feature request.
for instance, i would happily replace the :visited button with :checked if someone knows how to do that.
there are 2 .js files located in the Pinegrow Web Editor\lib\crsa folder on my PC that deal with these :visited, :hover, :focus, and :active pseudo classes… i wonder if these can be edited to bring :checked up instead?
i know next to nothing about .js and even less about what these do in PG.
I can understand the reasoning behind wanting to visually see the effects of the hover, focus, visited and active pseudo-classes because they can each present different visual styling (color, size, border, shadow etc), but why the need to see a simple check in a box?
same reasoning…
do a little searching on the “check box hack” or how do have interactive elements on your page without using js, just using pure CSS.
many things are possible.
You mean like this?
http://thelightwavegroup.com/tab/index.html
One of the users here asked me how to do this without js, so I made this example for him.
yes, that’s the ticket (minus all the BS bloat 
now if you wanted to preview that behavior inside PG, you have to use the Alt-Click to activate the slideout… and make your edits to the CSS in the blind using a text editor (bleh).
if PG had a :checked state toggle for the input you could made edits to the CSS just like anything else and see the affects in real time.
now i’ve since been experimenting with using the :hover state instead and if i’m willing to give up the on/off behavior, i can get the same effect on a momentary basis as long as the mouse is hovering.
with that i can toggle the style editor on any element (doesn’t have to be a link).
btw, the best practice to use position to hide the input rather than display because screen readers will know it’s there… so the visually impaired will know there is something to click on.
Good point on position vs display.
This was just something I threw together quick as an example for someone to follow on how to make a pop-out tab without js. I must have used a blank Bootstrap template in Pinegrow when I made it. Obviously, Bootstrap is not needed here.
I’m no expert of pseudo classes. I know there are well over a dozen, and I rarely use more than the well known 5 or 6. I suppose it’s a worthwhile feature request.
from what i’ve been reading, there are more pseudo classes coming in future versions of the spec, so it would be worth while for PG to keep on top of supporting these in the visual editor (imho).
i’m also now noticing that, if you use a combinator in your CSS (like the > or the ~) the rules involved will not show up in the ACTIVE tab, whether you use a pseudo class toggle or not.
if the rule is standalone (only affects a single element, like styling a link), then it will pop up, but if a combinator is involved, then it will not… this kind of hobbles the utility of that feature in PG.