Skip to main content
June 15, 2013
Question

how do you change bullets to check marks on a list

  • June 15, 2013
  • 2 replies
  • 16817 views

Hello,  how do you use something other than bullets on a list.  If you use check marks instead...can you change the color of the check marks?

Thanks

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    June 15, 2013

    Or, you could use the CSS :before pseudo-class property with an escaped HTML entity code like this:

    .checkmark li {list-style:none}

    .checkmark li:before {content:"\2714  "}

    <ul class="checkmark">

         <li>list item</li>

         <li>list item</li>

         <li>list item</li>

    </ul>

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    C_F_McBlob
    Inspiring
    June 15, 2013

    I'm unaware of any CSS for checkmarks as it isn't a list style rule.  You'd have to make a checkmark image and use it:

    You can set a class for the list item:

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

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

    And then in the HTML:

    <ul class="checkmark">
      
    <li>List item goes here</li>
    </ul>


    or set it for the entire list:


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

    And just create the list as normal.

    You'd need to "tweak" the CSS to place the image exactly where you want it.