Is there a way to dynamically change the border color of a custom checkbox when an event occurs? Here is the HTML code snippet:
<input id='B12' type='checkbox' class='checkbox' checked='checked'>
<label for='B12'>B12 </label>
<input id='B10' type='checkbox' class='checkbox' checked='checked'>
<label for='B10'>B10 </label>
<input id='B8' type='checkbox' class='checkbox' checked='checked'>
<label for='B8'>B8 </label>
<input id='BBW' type='checkbox' class='checkbox' checked='checked'>
<label for='BBW'>Wide </label>
The following CSS defines the styles for the checkboxes and labels:
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;
}
I am using Dart to loop through a list of checkboxes and want to change the border color to red if they are checked. The current code I have tried does not work. How can I properly access and modify the border color?
Here is the Dart code snippet:
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;
}