proper CSS for generating a checkmark li that works cross-browser

Question

I'm using the following CSS to add checkmarks before my <li>list items:

ul.checkmark li:before {
    content:"\2713\0020";
}

And then in the HTML:

<ul class="checkmark">
   <li>Learn the keyboard at your own pace</li>
</ul>

Works great in Safari, Firefox and Chrome, but displays "freak out boxes" on IE8.

Safari: alt text

IE8: alt text

Is there a portable way to specify a good-looking checkmark that will work in all the major browsers?

EDIT Solution: I ended up using a variation on meder's answer below:

ul.checkmark li {
    background:url("../checkmark.gif") no-repeat 0 50%;
    padding-left: 20px;
}

ul.checkmark {
    list-style-type: none;
}

Instead of background position `0 50%` you might want to use pixels instead of positioning the checkmark in the center (50%), otherwise it will be centered also when you have multiple lines in list item. — Tanel Jõeäär, Dec 28 '20 at 23:35

score 18 · Accepted Answer · answered Nov 27 '10 at 17:54

18

li { background:url(/images/checkmark.gif) no-repeat 0 50%; }

Would probably be the only way you'll get it to work consistently in the IE pre 8/9.

answered Nov 27 '10 at 17:54

meder omuraliev

183,342
71
393
434

I have used this technique a lot and it is fine in IE. – Moses Nov 27 '10 at 17:58

Robin Maben · Answer 2 · 2016-11-08T01:40:35.750

5

ul
{
    list-style-image:url("/default_unchecked.png");
    /* other list styles*/
 }

then later change it via javascript, maybe.

$('.selected').css("list-style-image", "url('/images/blueball.gif')");

edited Nov 08 '16 at 01:40

answered Nov 27 '10 at 18:10

Robin Maben

22,194
16
64
99

Just came across your answer on Google. The javascript part of your answer is not necessary. The question is only asking how to replace bullets with checkmarks in a `
– Cave Johnson Nov 07 '16 at 20:19
@KodosJohnson You might be right here. At the time, that was the only way I knew of changing default state to a "checked" state. Let me see if I can make the answer better. Thanks. – Robin Maben Nov 08 '16 at 01:43
Using a background image with the contents of the li in a span is still the superior method due to the flexibility that a background image allows. A list style image bullet is impossible to adjust and often times will not be in the desired spot next to your text. – Figjeti Dec 06 '16 at 19:04

score 4 · Answer 3 · edited May 23 '17 at 12:09

4

Hmmm how about going with a small image instead, then you'll get full compatibility with practically every browser

Alternatively take a look at this past question Tick symbol in HTML/XHTML

edited May 23 '17 at 12:09

Community

1
1

answered Nov 27 '10 at 17:45

Ross

1,425
1
19
38

Please find an article on making this solution backwards compatible here: https://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/ – chocolata Aug 27 '15 at 14:06

score 3 · Answer 4 · edited May 23 '17 at 11:46

I'm not sure if anyone still needs to support IE8 but I wanted to find out why IE8 creates those boxes so I searched the internet and found this post: Unicode characters and Internet Explorer

So based on the answers to that question, it looks like you can use the method described by the OP, you just have to specify a Unicode font to make IE8 happy. So in theory this should work fine:

ul.checkmark {
    list-style-type:none;
}
ul.checkmark li:before {
    content:"\2713\0020";
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}

<ul class="checkmark">
    <li>Learn the keyboard at your own pace</li>
</ul>

score 0 · Answer 5 · answered Jul 29 '16 at 17:37

I realize this is an old post but, with the many variations of screen sizes and pixel densities on mobile devices, I think the best approach is to convert your icon into a font with a program like Icomoon: https://icomoon.io/

Put the font files on your server and the css will look something like this.

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('/fonts/IcoMoon-Free.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'IcoMoon-Free' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
    content: "\ea10";
}

The html will be something like this:

<span class="icon icon-checkmark"></span>

proper CSS for generating a checkmark li that works cross-browser

5 Answers5