How to Use Tick/Checkmark Symbol (✓) Instead of Bullets in Unordered List

How to use tick / checkmark symbol (✓) instead of bullets in unordered list?

You can use a pseudo-element to insert that character before each list item:

ul {  list-style: none;}
ul li:before {  content: '✓';}

<ul>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li></ul>

Unordered List with checkmarks list-style-positions-outside Text aligned on the left vertically

The below code helps you in understanding. Here's a JSFiddle demo.

li:before
{
    content: '✔';   
    margin-left: -1em;
    margin-right: .100em;
}

ul
{
   padding-left: 20px;
   text-indent: 2px;
   list-style: none;
   list-style-position: outside;
}

Refer this link to get the tick mark: http://amp-what.com/#q=check%20mark

Paste the code in the content property of li to get the check mark.
I hope this will help you. Please vote.

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

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.

Remove bullets add tick not working

As it turned out, the class selector wasn't declared correctly, it was missing the period (.) and should be .removeBulletAddTick.

The code below demonstrates this, you'll notice the class in question added to the list item rules as well for more specificity - this is to ensure that these rules will only apply to the list items you intend them to; which are those with the classes .removeBulletAddTick.

ul .removeBulletAddTick {
  list-style: none;
}

ul li.removeBulletAddTick:before {
  content: '✓';
}

Updated JSFiddle

You don't even need to declare that class on every list item. It would be better to declare it on the containing parent element, as follows:

ul.removeBulletAddTick {
  list-style: none;
}

ul.removeBulletAddTick li:before {
  content: '✓';
}

Code Snippet Demonstration:

ul.removeBulletAddTick {  list-style: none;}
ul.removeBulletAddTick li:before {  content: '✓';}

<ul class="removeBulletAddTick">    <li>Test text 1</li>    <li>Test text 2</li>    <li>Test text 3</li></ul>

Green Check mark not getting displayed properly in css

Another possibility: don't use a character at all. Since you want a checkmark that's very squared off, create it out of the borders of a pseudo-element, rotated as needed.

ul {width:200px; list-style:none; margin:0; padding:0;}li {position:relative; background:#658B00; margin:0; padding:3px; color:white; border-radius:4px;}li::after {    content: "";   position: absolute;  right:4px;  top:6px;  width:14px;  height:5px;   border-left:4px solid #9CD106;  border-bottom:4px solid #9CD106;  transform:rotate(-45deg);}

<ul><li>testing</li></ul>

Use checkbox for list-style-type in unordered list in HTML

Your question is not very clear.

list-style-type is used to change the aesthetics of the bullets, but they can't have a specific function. In the example below, I used this property to remove the bullets.

ul {    list-style-type:none;}

<ul>    <li><input type="checkbox"> whatever</li>    <li><input type="checkbox"> whatever</li> <ul>

Does using unordered lists instead of tables make a lot of difference?

It sounds to me as if you are laying out a form ('text fields, labels and date pickers'), in which case you might be better using DIV, P, SPAN and LABEL tags to organize your controls, not TABLE tags or Lists.

As Oded says, it's not going to impact UI rendering much, but Tables are best kept for tabular data, and I would add that Lists, ordered or unordered, are best kept for, well, data in a list :)

If you are laying out form controls, I think this discussion may be more relevant to your decision: http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

At the risk of really starting a debate, my preferred layout for a line in an Asp.Net form is something like this:

<p class="form-line"> <!-- You could as well use a <div> -->
    <label>Field Name:</label>
    <asp:YOUR_CONTROL_HERE/>
    <asp:YOUR_VALIDATION_CONTROL_HERE/>
</p>

How to Use Tick/Checkmark Symbol (✓) Instead of Bullets in Unordered List