How to Draw a Checkmark/Tick Using CSS

How to draw a checkmark / tick using CSS?

You can now include web fonts and even shrink down the file size with just the glyphs you need.

li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}

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>

add fill circle with checkmark using css

You can use different font-family for one which has a check-mark to your liking.

.circle-checkmark {
  font-family: sans-serif;
  background: lightblue;
  color: white;
  padding: 1px 4px;
  border-radius: 50%;
}

ul {
  list-style-type: none;
}

li {
  margin: 4px 0;
}

li::before {
  font-family: sans-serif;
  content: "✔";
  color: white;
  display: inline-block;
  width: 1em;
  background: lightblue;
  padding-left: 3px;
  border-radius: 50%;
  margin-right: 1em;
}

<h2>Regular checkmark</h2>
<span class="circle-checkmark">✓</span>
<h2>Heavy checkmark</h2>
<span class="circle-checkmark">✔</span>

<h2>Something like this can also work</h2>
<ul>
  <li>first</li>
  <li>second</li>
</ul>

How to create a tick mark in a custom checkbox?

You have to manually customize your input & add a label in a way using pseudo elements to get the desired effect in the checkbox you want here.

Also, you can use content: '✔'; in your css to provide a tick on click.

I built you a demo to refer to, check the following code:

[type="checkbox"]:not(:checked),

[type="checkbox"]:checked {

  position: absolute;

  left: -9999px;

}

[type="checkbox"]:not(:checked)+label,

[type="checkbox"]:checked+label {

  position: relative;

  padding-left: 25px;

  cursor: pointer;

}

[type="checkbox"]:not(:checked)+label:before,

[type="checkbox"]:checked+label:before {

  content: '';

  position: absolute;

  left: 0;

  top: -5px;

  width: 40px;

  height: 40px;

  background: #fff;

  border-radius: 3px;

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);

  border-radius: 50%;

  background-color: #5cf1b3;

  outline: none;

}

[type="checkbox"]:not(:checked)+label:after,

[type="checkbox"]:checked+label:after {

  content: '✔';

  position: absolute;

  top: 8px;

  left: 10px;

  font-size: 24px;

  line-height: 0.8;

  color: #fff;

  transition: all .2s;

}

[type="checkbox"]:not(:checked)+label:after {

  opacity: 0;

  transform: scale(0);

}

[type="checkbox"]:checked+label:after {

  opacity: 1;

  transform: scale(1);

}

<p>

  <input type="checkbox" id="test1" />

  <label for="test1"></label>

</p>

how to use a checkmark as a checkbox in css

Customizing checkboxes is hard and requires a checkbox first.

You will need a checkbox to hold the value of the check. And you will need to style the label, and hide the checkbox, so that you will only see the label, and this label will be able to interact with the checkbox.

Try this instead :

.checkmark {

    display:inline-block;

    width: 22px;

    height:22px;

    -ms-transform: rotate(45deg); /* IE 9 */

    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */

    transform: rotate(45deg);

}

input[type="checkbox"] { display: none; }

.checkmark:before {

    content: '';

    position: absolute;

    width:3px;

    height:9px;

    background-color:#ccc;

    left:11px;

    top:6px;

}

.checkmark {

  cursor: pointer;

}

.checkmark:after {

    content: '';

    position: absolute;

    width:3px;

    height:3px;

    background-color:#ccc;

    left:8px;

    top:12px;

}

input[type="checkbox"]:checked + .checkmark:before,

input[type="checkbox"]:checked + .checkmark:after {

  background-color: green;

}

<input type="checkbox" id="cb">

<label for="cb" class="checkmark"></label>

Draw a check mark CSS animation from left down to right up

Well, this is my approach using <canvas> and JavaScript.

Demo on Fiddle -----> Square Corners | Round Corners

(Note: To change the animation speed increment or decrement the variable animationSpeed. Lower number yeilds Higher speed)

var start = 100;

var mid = 145;

var end = 250;

var width = 20;

var leftX = start;

var leftY = start;

var rightX = mid - (width / 2.7);

var rightY = mid + (width / 2.7);

var animationSpeed = 20;

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');

ctx.lineWidth = width;

ctx.strokeStyle = 'rgba(0, 150, 0, 1)';

for (i = start; i < mid; i++) {

  var drawLeft = window.setTimeout(function() {

    ctx.beginPath();

    ctx.moveTo(start, start);

    ctx.lineTo(leftX, leftY);

    ctx.stroke();

    leftX++;

    leftY++;

  }, 1 + (i * animationSpeed) / 3);

}

for (i = mid; i < end; i++) {

  var drawRight = window.setTimeout(function() {

    ctx.beginPath();

    ctx.moveTo(leftX, leftY);

    ctx.lineTo(rightX, rightY);

    ctx.stroke();

    rightX++;

    rightY--;

  }, 1 + (i * animationSpeed) / 3);

}

<canvas height="160"></canvas>

Easiest way to display a check mark over image when a checkbox input is selected?

Just add a label next to the checkbox and map it to the checkbox using id-for mapping. In css we will give the style to the label whenever the checkbox is checked using :checked selector. You can put you image in the label.

.categories-wrapper {

    position: relative;

}

.category-input {

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0;

    width: 100%;

    height: 100%;

}

.category-input:checked + label{

background:red; /* put your image here*/

 height: 50px;

  width: 50px;

  position: absolute;

 top:0;

 left:0;

}

<div class="categories-wrapper">

    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />

    <input class='category-input' type="checkbox" id='checker' name="categories[]" value="">

    <label for="checker"></label>

    <input type="hidden" name="categoryFiles[]" value="">

</div>

---

Related Topics