0

I am trying to build a custom checkbox. But I have an html layout like

<label class="container">One
    <div class="check">
        <input type="checkbox">
    </div>  
    <div class="checkmark">
    </div>
</label>

Here I am trying to hide input and design .checkmark as my new custom checkbox but since they are in diffrent div's I think I can't select them. I should do it in this HTML structure. If you can help me to handle it in this html structure I would be very glad. Thanks.

<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  display: none;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .container.checkmark:after {
  display: block;
}

.a input:checked ~ .container.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>
<body>

<label class="container">Checkbox
    <div class="check">
        <input type="checkbox">
    </div>  
    <div class="checkmark">
    </div>
</label>
</body>
</html>
Onur Yüce
  • 3
  • 1
  • Does this answer your question? [Custom Checkbox](https://stackoverflow.com/questions/6491962/custom-checkbox) – Marc Hjorth Feb 15 '22 at 14:09
  • Not actually the problem here is that the html structure is diffrent and thats why the solution there is not working – Onur Yüce Feb 15 '22 at 14:12

2 Answers2

1

Add the div with class checkmark inside the div with class check. Adjacent to checkbox

/* The container */

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox */

.container input {
  display: none;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}


/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
  background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.container input:checked~.checkmark {
  background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container input:checked~.container.checkmark:after {
  display: block;
}

.a input:checked~.container.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<label class="container">Checkbox
    <div class="check">
        <input type="checkbox">
          
    <div class="checkmark">
    </div>
    </div>
</label>
Master.Deep
  • 792
  • 5
  • 20
  • Thanks but problem is that I need to keep the HTML structure that way. So this does not solve it. – Onur Yüce Feb 15 '22 at 14:15
  • If you can't change the HTML structure, then I am afraid you can not achieve that without using JS – Master.Deep Feb 15 '22 at 14:16
  • Oh isn't it possible at all, and what is the actual reason I wonder ? Is it because we cant select with css outer tree or something ? – Onur Yüce Feb 15 '22 at 14:19
  • yes, with css as far as I know there is no possibility to traverse up tree node. – Master.Deep Feb 15 '22 at 14:20
  • Thanks for the answer, I will keep the question unanswered a bit incase someone comes uup with a solution – Onur Yüce Feb 15 '22 at 14:21
  • If you need to keep the html structure that way, maybe you could do it with ::before and ::after elements? This would leave the div `checkmark` as unused but it would solve your problem and you wouldn't need to change the structure. If its okay I'll post an answer using my idea. – Igor Lima Feb 15 '22 at 14:28
  • I just posted an answer with the solution I mentioned. – Igor Lima Feb 15 '22 at 14:44
0

Here is a working solution without modifying the HTML structure.

Using the ::before pseudo-element we can manipulate its behavior depending on the checkbox is checked or not.

/* Custom checkbox */
input[type="checkbox"] {
    appearance:none;
    display:block!important;
    position:relative;
}

input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  cursor:pointer;
}

.check {
    position: absolute;
    left: 0;
    top: 0;
}

input[type="checkbox"]:hover::before {
    background-color: silver;
}

input[type="checkbox"]:checked::before {
    background-color: #2196F3!important;
}


/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<label class="container">Checkbox
    <div class="check">
        <input type="checkbox">
    </div>  
    <div class="checkmark">
    </div>
</label>
Igor Lima
  • 307
  • 1
  • 11