How do I style checkbox buttons to look like line segment

Question

This is what I am trying to achieve

I was able to achieve custom checkbox, but I am stuck showing default grey background and a dynamic blue line.

In the first example, there is only one dot and blue line shall be shown from the beginning till the dot. In the second, blue line shall appear between them.

I would appreciate any ideas and help. Thank you.

 .wrapper { width: 236px; } .container { display: inline-block; position: relative; margin-left: 12px; margin-right: 12px; cursor: pointer; padding: 10px; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .container input { position: absolute; opacity: 0; } .checkmark { position: absolute; top: 6; left: 6; height: 8px; width: 8px; background-color: #eee; border-radius: 50%; } .container:hover input ~ .checkmark { background-color: #ccc; } .container input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { top: 2px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: white; } 

 <div class="wrapper"> <label class="container"> <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="container"> <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container"> <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container"> <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container"> <input type="checkbox"> <span class="checkmark"></span> </label> </div> 

I appreciate your help.

Answer 1

I highly recommend using the Range input type instead of hard-coded it. Check that new HTML5 input type on MDN Web Docs .

For the most suitable solution, you can try this plugin , Example 21 is exactly what you are looking for, and it won't costs you time as creating your custom Range input type. Also, it is compatible with different browsers, so you don't have to worry about compatibility issues. All you have to do is to change its CSS to meet your design needs!

Hope this helps you to create what you actually need in a minimal time!