Change CSS checkbox border color in event listener

jamacoe 0
Viewed 41

These little code snippets resemble two custom CSS checkboxes, based on this article.

For your convenience: jsfiddle.

I have two problems with this code:

  1. If clicking the 1st checkbox to unchecked, I want the event listener function to change the border's color of checkbox 1 to red. Methinks I'd have to change the object's :before properties? Anyway, I can't figure out how it's done and don't want to use jquery, font awesome or other external libraries, just pure CSS and js.

  2. The 2nd checkbox is intentionally not working. In order to make it work, I'd have to embrace the <input> with the <label> statements like in checkbox 1. Why doesn't it work with <label for="...">? Actually I'd like to get rid of the labels alltogether.

HTML:

document.getElementById("first").addEventListener("click", () => {

  const e = event.srcElement;

  /* HOW CAN I CHANGE THE BORDER'S COLOR ONCLICK ? */

  console.log(e.style);

  if (e.checked) {
    e.style.bordercolor = 'gray';
  } else {
    e.style.borderColor = 'red';
    e.style.borderBlockColor = 'red';
    e.style.accentColor = 'red';
    e.style.borderAfterColor = 'red';
    e.style.borderBeforeColor = 'red';
    e.style.outlineColor = 'red';
    e.style.overrideColors = 'red';
  }

});
.cbx {
  display: none;
  /* hide the regular checkbox */
}

.cbx+*::before {
  /* settings if checkbox is unchecked */
  flex-shrink: 0;
  display: inline-block;
  vertical-align: bottom;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 10%;
  border-style: solid;
  border-width: 0.1rem;
  content: "";
  /* no mark */
  border-color: gray;
  /* border color DON'T CHANGE IT HERE TO RED. Initially it should be gray */
  background: pink;
  /* background */
}

.cbx+* {
  display: inline-flex;
  padding: 0.5rem 1rem;
  color: purple;
  /* label color if unchecked */
}

.cbx:checked+* {
  color: red;
  /* label color if checked */
}

.cbx:checked+*::before {
  /* settings if checked */
  content: "X";
  /* the check mark */
  color: white;
  /* mark's color */
  text-align: center;
  background: green;
  /* background if checked */
  border-color: yellow;
  /* border if checked */
}
<form>

  <label>
        <input id="first" class="cbx" type="checkbox" />
        <span>First</span>
      </label>

  <!-- 2nd NOT WORKING IF <label> doesn't embrace <input> like in checkbox 1. WHY NOT? -->

  <label for="second">Second</label>
  <input id="second" class="cbx" type="checkbox" name="second" />

</form>

javascript css
1 Answers

Add an extra CSS class for the red border to override .cbx + *::before

.cbx.redBorder + *::before {
  border-color: red;
}

Add and remove this class to the checkbox onclick:

document.getElementById("cb").addEventListener("click", () => {
    var e=event.srcElement;
    if (e.checked) {
        e.classList.remove("redBorder");
    } else {
        e.classList.add("redBorder");
    }
});

Toggle won't work because the checkbox starts unchecked and thus can't remove redBorder if clicked.

https://jsfiddle.net/jamacoe/nL942u1h/119/

jamacoe0
Related