Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[SOLVED] css pseudo classes and com_connect checkboxes
I have just noticed a display bug on Brave, Safari, Opera, and Chrome browsers where the indicator appears twice on the “required” checkboxes. After the checkbox and after the label. My intention was to have it appear just once after the label. The css can be found on github.com/colak/neme/blob/master/css/default.css#L310 and here’s a sample com_connect form. The css appears correctly on FF. Any recommendations/fixes would be appreciated.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [SOLVED] css pseudo classes and com_connect checkboxes
If I was a guessing man I’d say it’s because comRequired is added to both label and input fields. So your rule .comRequired::after will add it to both. Using label.comRequired::after should only display it on one.
But the puzzling fact remains: why does Firefox not apply the pseudoclass pseudo-element after the input field? It should be doing the same as the other browsers. That’s a head-scratcher.
Last edited by Bloke (2021-01-23 11:52:02)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Online
Re: [SOLVED] css pseudo classes and com_connect checkboxes
Bloke wrote #328319:
If I was a guessing man I’d say it’s because
comRequiredis added to bothlabelandinputfields. So your rule.comRequired::afterwill add it to both. Usinglabel.comRequired::aftershould only display it on one.But the puzzling fact remains: why does Firefox not apply the pseudoclass after the input field? It should be doing the same as the other browsers. That’s a head-scratcher.
Your suggestion did fix it. Re FF, my default browser, I have no idea:(
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [SOLVED] css pseudo classes and com_connect checkboxes
Firefox only will apply the ::after pseudo-element (not -class ! [/g]) if you remove the default appearance (-moz-appearance: none for older and appearance: none for more recent versions). Webkit and derivatives (chromium) apply it always for historical reasons (when they all were using the same code, at one point the webkit-apple people wanted to change, but the webkit-chrome refused because they used for their ugly preferences “window”. old stuff).
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: [SOLVED] css pseudo classes and com_connect checkboxes
Hi Philippe,
Thanks for your post which prompted me to research about appearance. This article from css-tricks made sense.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline