Completely Customized Checklist Types | Fashionable CSS Options

This tutorial will present the way to use CSS grid structure for simple customized listing styling along with:

• Knowledge attributes because the content material of pseudo parts
• CSS counters for styling ordered lists
• CSS customized variables for per-list merchandise styling
• Responsive multi-column lists

Replace: The ::marker pseudo selector is now nicely supported in trendy browsers. Whereas this tutorial consists of helpful CSS suggestions for the objects listed above, chances are you’ll need to leap to the ::marker resolution

First we’ll setup our HTML, with one ul and one li. I’ve included an extended bullet to help in checking alignment, spacing, and line-heihgt.

<ul function="listing">
<li>Unordered listing merchandise</li>
<li>Cake ice cream candy sesame snaps dragée cupcake wafer cookie</li>
<li>Unordered listing merchandise</li>
</ul>
<ol function="listing">
<li>Ordered listing merchandise</li>
<li>Cake ice cream candy sesame snaps dragée cupcake wafer cookie</li>
<li>Ordered listing merchandise</li>
</ol>

Notice the usage of function="listing". At first, it might appear further, however we’re going to take away the inherent listing fashion with CSS. Whereas CSS would not usually have an effect on the semantic worth of parts, list-style: none can take away listing semantics for some display screen readers. The simplest repair is to outline the function attribute to reinstate these semantics. You possibly can study extra from this text from Scott O’Hara.

First we add a reset of listing types along with defining them as a grid with a niche.

ol,
ul {
margin: 0;
padding: 0;
list-style: none;
show: grid;
hole: 1rem;
}

The hole profit is including area between li, taking the place of an older methodology reminiscent of li + li { margin-top: ... }.

Subsequent, we’ll put together the listing objects:

li {
show: grid;
grid-template-columns: 0 1fr;
hole: 1.75em;
align-items: begin;
font-size: 1.5rem;
line-height: 1.25;
}

We have additionally set listing objects up to make use of grid. And we have upgraded an older “hack” of utilizing padding-left to go away area for an absolute positioned pseduo aspect with a combo of a 0 width first column and hole. We’ll see how that works in a second. Then we use align-items: begin as a substitute of the default of stretch, and apply some kind styling.

Now, this will likely not precisely be a scalable resolution, however for enjoyable we’ll add a customized information attribute that can outline an emoji to make use of because the bullet for every listing merchandise.

First, let’s replace the ul HTML:

<ul function="listing">
<li data-icon="🦄">Unordered listing merchandise</li>
<li data-icon="🌈">
Cake ice cream candy sesame snaps dragée cupcake wafer cookie
</li>
<li data-icon="😎">Unordered listing merchandise</li>
</ul>

And to use the emojis as bullets, we use a fairly magical method the place information attributes can be utilized as the worth of the content material property for pseudo parts:

ul li::earlier than {
content material: attr(data-icon);
font-size: 1.25em;
}

This is the consequence, with the ::earlier than aspect inspected to assist illustrate how the grid is working:

The emoji nonetheless is allowed to take up width to be seen, however successfully sits within the hole. You possibly can experiment with setting the primary li grid column to auto which is able to trigger hole to totally be utilized between the emoji column and the listing textual content column.

CSS counters have been a viable resolution since IE8, however we’ll add an additional flourish of utilizing CSS customized variables to alter the background coloration of every quantity as nicely.

We’ll apply the CSS counter types first, naming our counter orderedlist:

ol {
counter-reset: orderedlist;
}
ol li::earlier than {
counter-increment: orderedlist;
content material: counter(orderedlist);
}

This achieves the next, which does not look a lot totally different than the default ol styling:

Subsequent, we are able to apply some base styling to the counter numbers:

font-family: "Indie Flower";
font-size: 1.25em;
line-height: 0.75;
width: 1.5rem;
padding-top: 0.25rem;
text-align: middle;
coloration: #fff;
background-color: purple;
border-radius: 0.25em;

First, we apply a Google font and bump up the font-size. The line-height is half of the utilized line-height of the li (no less than that is what labored for this font, it might be a little bit of a magic quantity). It aligns the quantity the place we wish in relation to the principle li textual content content material.

Then, we have to specify an specific width. If not, the background won’t seem although the textual content will.

Padding is added to repair the alignment of the textual content in opposition to the background.

Now we have now this:

That is actually feeling extra customized, however we’ll push it a bit extra by swapping the background-color to a CSS customized variable, like so:

ol {
--li-bg: purple;
}
ol li::earlier than {
background-color: var(--li-bg);
}

It’s going to seem the identical till we add inline types to the second and third li to replace the variable worth:

<ol function="listing">
<li>Ordered listing merchandise</li>
<li fashion="--li-bg: darkcyan">
Cake ice cream candy sesame snaps dragée cupcake wafer cookie
</li>
<li fashion="--li-bg: navy">Ordered listing merchandise</li>
</ol>

And this is the ultimate ul and ol all put collectively:

By Stephanie Eckles (@5t3ph)

Our instance solely had 3 brief listing objects, however remember we utilized grid to the bottom ol and ul.

Whereas in a earlier life I’ve completed enjoyable issues with modulus in PHP to separate up lists and apply further lessons to attain evenly divided multi-column lists.

With CSS grid, now you can apply it in three traces with inherent responsiveness, equal columns, and respect to content material line size:

ol,
ul {
show: grid;
grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));
hole: 1rem;
}

Making use of to our present instance (remember to take away the max-width on the li first) yields:

You possibly can toggle this view by updating the $multicolumn variable in Codepen to true.

When you have greater than plain textual content contained in the li – together with one thing like an harmless <a> – our grid template will break.

Nonetheless, it is an easy clear up – wrap the li content material in a span. Our grid template would not care what the weather are, however it does solely anticipate two parts, the place the pseudo aspect counts as the primary.

Through the months after this text was initially posted, assist for ::marker grew to become significantly better throughout all trendy browsers.

The ::marker pseudo selector permits immediately altering and styling the ol or ul listing bullet/numerical.

We will totally exchange the answer for ul bullets utilizing ::marker however we have now to downgrade our ol resolution as a result of there are just a few properties allowed for ::marker:

• animation-*
• coloration
• content material
• path
• font-*
• transition-*
• unicode-bidi
• white-space

Since content material continues to be an allowed property, we are able to hold our data-icon resolution for permitting customized emoji markers 🎉

We simply have to swap ::earlier than to ::marker:

ul li::marker {
content material: attr(data-icon);
font-size: 1.25em;
}

Then take away the not wanted grid properties from the li and add again in some padding to switch the eliminated hole:

li {
padding-left: 0.5em;
}

Lastly, we beforehand eliminated margin however we have to add again in some left margin to make sure area for the ::marker to forestall it being minimize off because of overflow:

ol,
ul {
margin: 0 0 0 2em;
}

And the visible outcomes is similar to our earlier resolution, as you possibly can see in the demo.

For our ordered listing, we are able to now change and benefit from the built-in counter.

We additionally should drop our background-color and border-radius so we’ll swap to utilizing our customized property for the coloration worth. And we’ll change our customized property title to --marker-color for readability.

So our decreased types are as follows:

ol {
--marker-color: purple;
}
li::marker {
content material: counter(list-item);
font-family: "Indie Flower";
font-size: 1.5em;
coloration: var(--marker-color);
}

Remember to replace the CSS customized property title within the HTML, too!

Be careful for this gotcha: Altering the show property for li will take away the ::marker pseudo aspect. So when you want a special show kind for listing contents, you will want to use it by nesting an extra wrapping aspect.

This is our up to date customized listing types that now use ::marker.

You’ll want to verify for present browser assist to resolve which customized listing fashion resolution to make use of based mostly in your distinctive viewers! You could need to select to make use of ::marker as a progressive enhancement from one of many beforehand demonstrated options.

By Stephanie Eckles (@5t3ph)

For extra particulars on utilizing ::marker, take a look at this wonderful article by Adam Argyle.