Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

how do you change bullets to check marks on a list

Guest
Jun 14, 2013 Jun 14, 2013

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

16.8K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 14, 2013 Jun 14, 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2013 Jun 15, 2013
LATEST

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 & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines