How to customise tick on checbox using css?

Question

I have a checkbox which I would like to look like this image below

This is what I have tried so far:

.rodo_icon-right {
  position: relative;
  top: 4px;
  font-size: 20px !important;
}

.rodo-checkbox {
  display: block;
  /*margin-top: -46px;    - commented for snippet to work */
  position: absolute;
  font-size: 10px;
}

.rodo-checkbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.rodo-checkbox label {
  position: relative;
  cursor: pointer;
  text-transform: initial;
}

.rodo-checkbox label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 6px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 3px;
}

.rodo-checkbox input:checked+label:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 11px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

<div class="rodo-checkbox">
  <input type="checkbox" id="html">
  <label for="html">I agree to the terms of service - <span style="text-decoration: underline;">read the Terms of Service</label><i class="fa fa-angle-right rodo_icon-right" aria-hidden="true"></i>
</div>

I have tried different methods but I am not able to get what I want.

What do I need to change to get what I want? Please help.

"get what I want" - I seem to see almost the same thing as the image. How exactly is what you have now unsatisfactory? Please be precise, don't rely on image alone. Is it the size? The colours? The spacing? The way it appears and disappears? — Amadan, Oct 18 '18 at 11:04
Hi adam its not the same as image the image have little bit round corner , what I have now its straight without round border — The Dead Man, Oct 18 '18 at 11:07
possible duplicate of [Replace the 'Tick' mark of a HTML check box with an image or any other symbol [duplicate] ](https://stackoverflow.com/questions/30708401/replace-the-tick-mark-of-a-html-check-box-with-an-image-or-any-other-symbol) — Bhargav Chudasama, Oct 18 '18 at 11:12
Possible duplicate of [How to style a checkbox using CSS?](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) — Rob, Oct 18 '18 at 12:19

score 2 · Answer 1 · answered Oct 18 '18 at 11:12

It is likely easiest to use images that represent an empty and a checked checkbox. Then with pseudo code, you can put those images in front of the label.

#html {
  display: none;
}

#html+label {
  position: relative;
  margin-left: 25px;
  display: flex;
  align-items: center;
  line-height: 25px;
}

#html:not(:checked)+label::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 0;
  width: 25px;
  height: 25px;
  /* Use an empty checkbox image */
  background-image: url("https://via.placeholder.com/25x25/00ff00");
}
#html:checked+label::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 0;
  width: 25px;
  height: 25px;  
  /* Use an checked checkbox image */
  background-image: url("https://via.placeholder.com/25x25/ff0000");
}

<div class="rodo-checkbox">
  <input type="checkbox" id="html">
  <label for="html">I agree to the terms of service - <span style="text-decoration: underline;">read the Terms of Service</span></label><i class="fa fa-angle-right rodo_icon-right" aria-hidden="true"></i>
</div>

Luís P. A. · Accepted Answer · 2018-10-18T11:23:08.790

Try this:

HTML

<input type="checkbox" id="html">
<label for="html" class="rodo-checkbox"></label><p class="disclaimer">I agree to the terms of service - <span style="text-decoration: underline;">read the Terms of Service</span></p> <i class="fa fa-angle-right rodo_icon-right" aria-hidden="true"></i>

CSS

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

p.disclaimer{
  vertical-align: middle;
  display: inline-block;
}

label {
  position: relative;
  cursor: pointer;
  text-transform: initial;
  display: inline-block;
  width: 35px;
  height: 35px;
  background: transparent url(https://image.ibb.co/dNKnvf/check.png);
  background-position: 0 0;
  vertical-align: middle;
  margin-right: 10px;
}

input:checked+label {
  background-position: 35px 0;
}

DEMO HERE

Very dope solution brother – The Dead Man Oct 18 '18 at 13:20 — The Dead Man, Oct 18 '18 at 13:20
@user9964622 - Narcos influence :D – Luís P. A. Oct 18 '18 at 13:40 — Luís P. A., Oct 18 '18 at 13:40

score 0 · Answer 3 · 2018-10-18T11:42:35.113

0

at the top of your css you have to first reset the default style for the checkbox:

input[type="checkbox"] {
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     -ms-appearance: none !important;
     -o-appearance: none !important;
     appearance: none !important;
  border: 2px solid #000; 
  height: 26px;
  width: 26px;
  border-radius: 6px;
  cursor: pointer;
}

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

edited Oct 18 '18 at 11:42

answered Oct 18 '18 at 11:08

Yeah that is not a problem , the problem is I want round border at bottom of the tick as you can see on the image – The Dead Man Oct 18 '18 at 11:09

How to customise tick on checbox using css?

3 Answers3