html - 如何使用 Dart 更改自定义复选框边框

Question

当事件发生时，我想更改自定义复选框边框的颜色。HTML 是:

      <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;
}

使用 Dart 我有一个复选框列表，然后循环遍历它们，目的是在它们被选中时将边框更改为红色(并显示特定图像)。我尝试过的注释掉的行及其变体不起作用。如何访问和更改边框？我是新来的...

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;
}

Answer 1

编辑

见 How to style checkbox using CSS?

原始答案

您可以直接使用设置样式属性

checkBoxes[whichImage].style  
    //..border = '1px solid red'; // either this way or
  ..borderWidth = '1px'
  ..borderStyle = 'solid'
  ..borderColor = 'red';

外部样式通常是首选方式(如@sunglim 所示)