Skip navigation
Currently Being Moderated

how do you change bullets to check marks on a list

Jun 14, 2013 9:03 PM

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

 
Replies
  • Currently Being Moderated
    Jun 14, 2013 9:37 PM   in reply to Hot Rod Raven

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 9:39 AM   in reply to Hot Rod Raven

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points