2 Replies Latest reply: Jun 15, 2013 9:39 AM by Nancy O. RSS

    how do you change bullets to check marks on a list

    Hot Rod Raven Community Member

      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

        • 1. Re: how do you change bullets to check marks on a list
          Mike M Community Member

          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.

          • 2. Re: how do you change bullets to check marks on a list
            Nancy O. MVP

            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.