Html 如何使用省道更改自定义复选框边框

发生事件时，我希望更改自定义复选框边框的颜色。 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>

使用Dart，我有一个复选框列表，然后在它们之间循环，如果它们被选中（并显示特定的图像），则打算将边框更改为红色。我尝试过的注释掉的行和它的变体不起作用。如何访问和更改边界？我是新来的

省道：

final checkbox=querySelectorAll（“[class=checkbox]”）；
//后来
对于（；whichImage<4；whichImage++）{
如果（复选框[whichImage]。选中）{
imageElement.src=imageList[whichImage]；
//复选框[whichImage]。边框='1px实心红色'；
打破
}

添加Css

.CheckedCss {
  border: 1px solid red;
}

从飞镖的角度来看

   ...

   querySelectedDom.classes.add('CheckedCss');

   ...

编辑

看

原始答案

可以使用直接设置样式特性

复选框[whichImage]。样式
//…边框='1px纯红'；//以这种方式或
…边框宽度='1px'
…borderStyle='实心'
…边框颜色='红色'；

---

外部样式通常是首选的方式（如@sunglim所示）

我认为这是jQuery，我对它一无所知，我猜它将尝试为所有检查的边框上色，而不仅仅是一个。不，这是dart代码。请看这两种样式都不适合我。也许我应该尝试更改标签文本的颜色（还是背景？）。我打算在加载另一个图像ls后立即恢复原始颜色。你是对的，我之前也遇到过。只是忘了这在这里适用。这是CSS/浏览器问题，与Dart无关。复选框元素不允许通过样式属性进行太多操作。有很多自定义的checkbox（据我所知）都使用一种方法，使默认复选框的外观不可见，并提供其外观的自定义实现（通常仅限于CSS）。请参阅我更新答案的链接。我正在标记此问题已解决。我有另一个不涉及边界的解决方案，当我了解更多CSS时，我将重新讨论此问题。

.CheckedCss {
  border: 1px solid red;
}

   ...

   querySelectedDom.classes.add('CheckedCss');

   ...