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
– Amadan, Commented Oct 18, 2018 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
– The Dead Man, Commented Oct 18, 2018 at 11:07
possible duplicate of [Replace the 'Tick' mark of a HTML check box with an image or any other symbol [duplicate] ](stackoverflow.com/questions/30708401/…) — Bhargav Chudasama
– Bhargav Chudasama, Commented Oct 18, 2018 at 11:12

Luís P. A. · Accepted Answer · 2018-10-18 11:23:08Z

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

Gerard · Accepted Answer · 2018-10-18 11:12:27Z

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>

score 0 · Accepted Answer · 2018-10-18 11:42:35Z

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

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

Collectives™ on Stack Overflow

How to customise tick on checbox using css?

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Hot Network Questions