When an event occurs I want to change the color of the border of a custom check box. 
The HTML is:

```
      <input id='B12' type='checkbox' class='checkbox' checked='checked'>
        <label for='B12'>B12&nbsp;&nbsp;</label>
      <input id='B10' type='checkbox' class='checkbox' checked='checked'>
        <label for='B10'>B10&nbsp;&nbsp;</label>
      <input id='B8' type='checkbox' class='checkbox' checked='checked'>
        <label for='B8'>B8&nbsp;&nbsp;&nbsp;</label>
      <input id='BBW' type='checkbox' class='checkbox' checked='checked'>
        <label for='BBW'>Wide&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>

```

CSS:

```
input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]+label:before {
  outline: 0;
  border: 2px solid #F8F8E0;
  content: url(resources/CheckBoxUnchecked.png);
  display: inline-block;
  font: 24px/1em sans-serif;
  height: 24px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 24px;
}

input[type="checkbox"]:checked+label:before {
  border: 2px solid #077313;
  background: #00ff00;
  content: url(resources/CheckBoxOK.png); /* icon */
  text-align: center;
}

input[type="checkbox"]:checked+label:after {
  font-weight: bold;
}

```

Using Dart I have a list of the checkboxes and then loop through them with the intention of changing the border to red if they are checked (and displaying a particular image). The commented out line and variations of it that I have tried do not work. How do I access and change the border? I'm new at this ...

Dart:

```
final checkBoxes = querySelectorAll('[class=checkbox]');
// later
for(; whichImage < 4; whichImage++){
  if(checkBoxes[whichImage].checked) {
    imageElement.src = imageList[whichImage];
    // checkBoxes[whichImage].border = '1px solid red';
    break;
}

```