Reputation: 17021

How to draw a checkmark / tick using CSS?

How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.

EDIT Icon fonts are a great suggestion. I was looking for something like this.

Upvotes: 98

Answers (19)

Aditya Lawaniya

Reputation: 11

.checkmark{
display: flex;
background-color: transparent;
margin: 10px;
padding: 40px;
height: 60px;
width: 50px;
transform: rotate(45deg);
border: 1px black;
justify-content: right;
align-items: flex-end;
}
.tick1{
height: 15px;
width: 18px;
background-color: #ccc;
border: 1px solid #ccc;
}
.tick2{
height: 60px;
width: 15px;
background-color: #ccc;
border: 1px solid #ccc;
}

<div class="checkmark">
  <div class="tick1"></div>
  <div class="tick2"></div>
</div>

Upvotes: 1

BM2ilabs

Reputation: 532

i like this way because you don't need to create two components just one.

.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

Animation from Scott Galloway Pen

$('#toggle').click(function() {
  $('.circle-loader').toggleClass('load-complete');
  $('.checkmark').toggle();
});

body {
  padding: 5em;
  text-align: center;
}

h1 {
  margin-bottom: 1em;
}

.circle-loader {
  margin-bottom: 3.5em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left-color: #5cb85c;
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: #5cb85c;
  transition: border 500ms ease-out;
}

.checkmark {
  display: none;
}

.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}

.checkmark:after {
  opacity: 1;
  height: 3.5em;
  width: 1.75em;
  transform-origin: left top;
  border-right: 3px solid #5cb85c;
  border-top: 3px solid #5cb85c;
  content: '';
  left: 1.75em;
  top: 3.5em;
  position: absolute;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>

<div class="circle-loader">
  <div class="checkmark draw"></div>
</div>

<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>

Upvotes: 6

dayuloli

Reputation: 17021

You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.

DEMO 1

.checkmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_stem {
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark_kick {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

<span class="checkmark">
  <div class="checkmark_stem"></div>
  <div class="checkmark_kick"></div>
</span>

DEMO 2 (With circle)

.checkmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_circle {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: green;
  border-radius: 11px;
  left: 0;
  top: 0;
}

.checkmark_stem {
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #fff;
  left: 11px;
  top: 6px;
}

.checkmark_kick {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #fff;
  left: 8px;
  top: 12px;
}

<span class="checkmark">
  <div class="checkmark_circle"></div>
  <div class="checkmark_stem"></div>
  <div class="checkmark_kick"></div>
</span>

Upvotes: 109

JohanVdR

Reputation: 2878

I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.

Lists

ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

body {
  font-size: 75%;
}

ul {
  padding: 0;
}

li {
  list-style: none
}

li:before {
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

<ul>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ul>

Checkboxes

You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '✔';
  color: green;
}

body {
  font-size: 75%;
}

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}

label:before,
input[type="checkbox"]:checked+label:before {
  content: '';
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  text-align: center;
}

input[type="checkbox"]:checked+label:before {
  content: '✔';
  color: green;
}

<input type="checkbox" value="Option 1" name="option_1" id="option_1" />
<label for="option_1">option 1</label>

Upvotes: 3

Kheema Pandey

Reputation: 10285

Here is another CSS solution. It takes fewer lines of code.

ul li:before {
  content: '\2713';
  display: inline-block;
  color: red;
  padding: 0 6px 0 0;
}

ul li {
  list-style-type: none;
  font-size: 1em;
}

<ul>
  <li>test1</li>
  <li>test</li>
</ul>

Upvotes: 107

sidoco

Reputation: 107

Also, using the awesome font, you can use the following tag. Simple and beautiful

With the possibility of changing the size and color and other features in CSS

See result:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<h1>fa fa-check-circle</h1>

<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle" style="font-size:24px"></i>
<i class="fa fa-check-circle" style="font-size:36px"></i>
<i class="fa fa-check-circle" style="font-size:48px;color:red"></i>
<br>

<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-check-circle"></i></button>

<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf058;</i>

Upvotes: 0

1000Gbps

Reputation: 1527

This is my variant for making 'checked' buttons

function clickMe(data) {
  data.classList.add("checked");
}

.unchecked::before {
  content: "C";
}

.unchecked {
  border-radius: 50%;
  outline: none;
}

.checked::before {
  content: "L";
}

.checked {
  background-color: green;
  transform: rotate(45deg) scaleX(-1);
}

<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>

Upvotes: 0

matthewd

Reputation: 331

I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.

Simple, semantic, without any dependencies or additional HTML.

label {
  cursor: pointer;
}

input[type="checkbox"] {
  position: relative;
  top: 2px;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #b7b7b7;
}

input[type="checkbox"]:before {
  content: '';
  display: block;
  transition: transform 200ms;
}

input[type="checkbox"]:checked:before {
  width: 4px;
  height: 9px;
  margin: 0px 4px;
  border-bottom: 2px solid #115c80;
  border-right: 2px solid #115c80;
  transform: rotate(45deg);
}

<label>
  <input type="checkbox" name="check-1" value="Label">Label
</label>

Upvotes: 12

lonix

Reputation: 20979

If you want a tick, you probably also want a cross, with background colours.

.icon {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success          { background: green; }
.icon.icon-success:before   { width:  3px; height:  9px; top:  6px; left: 11px; }
.icon.icon-success:after    { width:  3px; height:  3px; top: 12px; left:  8px; }
.icon.icon-failure          { background: lightcoral; }
.icon.icon-failure::before  { width:  3px; height: 12px; top:  5px; left: 10px; }
.icon.icon-failure::after   { width: 12px; height:  3px; top: 10px; left:  5px; }

<i class="icon icon-success"></i>
<i class="icon icon-failure"></i>

Upvotes: 1

Mehedi Hasan

Reputation: 96

We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:

<span class="check_text">Some Text</span>

Now, we can add the CSS like this:

span.check_text:before {
    position: absolute;
    height: 15px;
    width: 5px;
    border-bottom: 3px solid red;
    border-right: 3px solid red;
    content: "";
    transform: rotate(45deg);
    left: -25px;
    top: 2px;
}

Upvotes: 1

GameChanger

Reputation: 438

After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.

.snackbar_circle {
  background-color: #f0f0f0;
  border-radius: 13px;
  padding: 0 5px;
}

.checkmark {
  font-family: arial;
  font-weight: bold;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  color: #63BA3D;
  display: inline-block;
}

<span class="snackbar_circle">
   <span class="checkmark">L</span>
</span>

Upvotes: 2

Petronella

Reputation: 2545

only css, quite simple I find it:

.checkmark {
      display: inline-block;
      transform: rotate(45deg);
      height: 25px;
      width: 12px;
      margin-left: 60%; 
      border-bottom: 7px solid #78b13f;
      border-right: 7px solid #78b13f;
    }

<div class="checkmark"></div>

Upvotes: 71

Gopal Gautam

Reputation: 39

This is simple css for Sign Mark.

ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}

Upvotes: -2

silvedo

Reputation: 121

Try this // html example

<span>&#10003;</span>

// css example

span {
  content: "\2713";
}

Upvotes: 6

gursahib.singh.sahni

Reputation: 1597

You might want to try fontawesome.io

It has great collection of icons. For you <i class="fa fa-check" aria-hidden="true"></i> should work. There are many check icons in this too. Hope it helps.

Upvotes: 1

Henry

Reputation: 1049

Do some transforms with the letter L

.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}

<div class="checkmark">L</div>

Upvotes: 67

Philip

Reputation: 2988

An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders

It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform

Example

li {
  position: relative; /* necessary for positioning the :after */
}

li.done {
  list-style: none; /* remove normal bullet for done items */
}

li.done:after {
  content: "";
  background-color: transparent;
  
  /* position the checkbox */
  position: absolute;
  left: -16px;
  top: 0px;

  /* setting the checkbox */
    /* short arm */
  width: 5px;
  border-bottom: 3px solid #4D7C2A;
    /* long arm */
  height: 11px;
  border-right: 3px solid #4D7C2A;
  
  /* rotate the mirrored L to make it a checkbox */
  transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

To do:
<ul>
  <li class="done">Great stuff</li>
  <li class="done">Easy stuff</li>
  <li>Difficult stuff</li>
</ul>

Upvotes: 29

Okiemute Omuta

Reputation: 575

li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Upvotes: 2

JohanVdR

Reputation: 2878

You can now include web fonts and even shrink down the file size with just the glyphs you need. https://github.com/fontello/fontello http://fontello.com/

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;
}

Upvotes: 26

How to draw a checkmark / tick using CSS?

Answers (19)

Related Questions