Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-01-23 09:29:36

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

[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.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#2 2021-01-23 09:42:19

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,246
Website GitHub

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

Offline

#3 2021-01-23 09:55:27

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: [SOLVED] css pseudo classes and com_connect checkboxes

Bloke wrote #328319:

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 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.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#4 2021-01-23 11:44:36

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,340
Website

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 ?

Offline

#5 2021-01-24 07:38:54

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

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.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB