how to change the color of a checkmark when a link name is clicked

Question

i have the following anchor tag thats embedded dynamically to a <ul> tag, when the user clicks on the word TEST i want the checkmark to change colour to blue,i tried the following but its not working,what am i doing wrong?

.checkmark{
display: inline-block;
    width: 22px;
    /* height: 22px; */
    height: 17px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 50%;
    margin-bottom: 1px;
}
.checkmark:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #ccc;
    left: 11px;
    top: 6px;
}

.checkmark {
    cursor: pointer;
}

 .checkmark:after {
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #ccc;
        left: 8px;
        top: 12px;
    }

input[type="checkbox"]:checked + .checkmark:before,
input[type="checkbox"]:checked + .checkmark:after {
    background-color: blue;
}

<a class="internal" data-destination="local" dataid="66027" data-nodeid="undefined" ><span><input type="checkbox" style="display:none;" id="cb66027 "></span>TEST<label for="cb66027" class="checkmark"></label></a>

https://stackoverflow.com/questions/27417398/how-to-change-the-checked-mark-color-of-a-checkbox-in-html — Shakil Hossain, Feb 21 '18 at 13:14

score 2 · Answer 1 · answered Feb 21 '18 at 12:27

An <a> wrapped round an <input> will not toggle the checked state when clicked. You should convert the <a> to a <label>.

This means that your current .checkmark label will need to be a different element. I've used a span.

You should also move the <input> outside of it's parent <span> so that the <input> and .checkmark are siblings.

.checkmark {
  display: inline-block;
  width: 22px;
  /* height: 22px; */
  height: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 50%;
  margin-bottom: 1px;
}

.checkmark:before {
  content: '';
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark:after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
  background-color: blue;
}

<label class="internal" data-destination="local" dataid="66027" data-nodeid="undefined">
  <input type="checkbox" style="display:none;" id="cb66027 ">
  TEST
  <span for="cb66027" class="checkmark"></span>
</label>

I'm not sure what you mean. A link to what? It doesn't have an href — Turnip, Feb 21 '18 at 12:39
yes,i didnt add the href,sorry didnt notice that, it opens up an item on my current page — john, Feb 21 '18 at 12:44
OK. But surely that is triggered with Javascript? So the element used shouldn't matter. — Turnip, Feb 21 '18 at 12:45

Bhuwan · Answer 2 · 2018-02-21T12:38:06.050

You are using a wrong + selector...

input+.checkmark means... input and .checkmark should be adjacent element...which is not in your case...

...so remove the span and put input and .checkmark in same level...

...also use opacity:0 instead of display:none to input[checkbox]...

I have changes some of your css

Stack Snippet

.checkmark {
  display: inline-block;
  width: 22px;
  /* height: 22px; */
  height: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 50%;
  margin-bottom: 1px;
}

.checkmark:before {
  content: '';
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark:after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
  background-color: blue;
}

input[type="checkbox"] {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 9;
  height: 100%;
  top: 0;
  cursor: pointer;
  opacity: 0;
  margin: 0;
}

a.internal {
  position: relative;
}

<a class="internal" data-destination="local" dataid="66027" data-nodeid="undefined" for="cb66027"><input type="checkbox" id="cb66027 ">TEST<label class="checkmark"></label></a>

how to change the color of a checkmark when a link name is clicked

2 Answers2