Put a Background on Open Particulars Components

One factor that may be only a smidge funky concerning the <particulars> factor is that, when open, it’s not all the time 100% clear what’s inside that factor and what isn’t. I’m not saying that all the time issues or that it’s a very laborious drawback to unravel, I’m simply noting it because it got here up just lately for me.

Right here’s a visible instance:

What textual content right here is inside a <particulars> and what isn’t?

The answer is… CSS. Model the <particulars> considerably uniquely, and that drawback goes away. Even if you would like the typography to be the identical, otherwise you don’t need any unique styling till the <particulars> is opened, it’s nonetheless attainable. Utilizing an alpha-transparent fill, you’ll be able to even be sure that deeper-nested <particulars> stay clear.

Right here’s that CSS:

particulars[open] {
–bg: rgb(0 0 0 / 0.2);
background: var(–bg);
define: 1rem stable var(–bg);
margin: 0 0 2rem 0;
}

And the demo:

The put up Put a Background on Open Particulars Components appeared first on CSS-Tips.

You may help CSS-Tips by being an MVP Supporter.