How to draw a checkmark / tick using CSS?
CssDrawingCss ShapesCss Problem Overview
Css Solutions
Solution 1 - Css
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.
HTML
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
CSS
.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;
}
Solution 2 - Css
Here is another CSS solution. its take less line 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>
Here is the Demo link http://jsbin.com/keliguqi/1/
Solution 3 - Css
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>
Solution 4 - Css
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>
Solution 5 - Css
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;
}
Solution 6 - Css
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>
Solution 7 - Css
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.
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;
}
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>
Solution 8 - Css
Try this // html example
<span>✓</span>
// css example
span {
content: "\2713";
}
Solution 9 - Css
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;
}
Solution 10 - Css
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;
}
See here: http://jsfiddle.net/hpmW7/3/
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;
}
See the JS fiddle: http://jsfiddle.net/VzvFE/37
Solution 11 - Css
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);
}
Solution 12 - Css
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>
Solution 13 - Css
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.
Solution 14 - Css
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 here
Solution 15 - Css
This is my variant for making 'checked' buttons
HTML
<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>
JavaScript
function clickMe(data) {
data.classList.add("checked");
}
CSS
.unchecked::before { content: "C"; }
.unchecked { border-radius: 50%; outline: none; }
.checked::before { content: "L"; }
.checked { background-color: green; transform: rotate(45deg) scaleX(-1); }
Solution 16 - Css
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;
}
Solution 17 - Css
This is simple css for Sign Mark.
ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}