How to change custom Check Box border with Dart

Question

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

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

EDIT

see How to style checkbox using CSS?

original answer

You can set style properties directly using

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

External styles are usually the preferred way (like showed by @sunglim)

edited May 23 '17 at 12:10

Community

1
1

answered Mar 01 '14 at 10:10

Günter Zöchbauer

623,577
216
2,003
1,567

1

Neither style works for me. Perhaps I should just attempt to change the label text color (or background?). I intend to restore the original color as soon as another image ls loaded. – Nate Lockwood Mar 01 '14 at 19:00
You are right, I encountered this myself a while ago. Just forgot that this applies here. This is a CSS/Browser problem, this has nothing to do with Dart. The checkbox element just doesn't allow to be manipulated much by style attributes. There are a lot of customized checkboxes out there and they all (as far as I know) use an approach where they make the default checkbox appearance invisble and provide a custom implementation of it's appearance (often CSS only). See the link of my updated answer. – Günter Zöchbauer Mar 01 '14 at 19:09
I'm marking this solved. I have another solution that doesn't involve the border and I'll revisit the problem when I learn more CSS. – Nate Lockwood Mar 06 '14 at 22:05

score 0 · Answer 2 · answered Mar 01 '14 at 05:49

0

Add Css.

.CheckedCss {
  border: 1px solid red;
}

From Dart side,

   ...

   querySelectedDom.classes.add('CheckedCss');

   ...

answered Mar 01 '14 at 05:49

Sungguk Lim

6,109
7
43
63

I think that's jQuery of which I know nothing and I'm guessing that it will attempt to color the border of all the checks, not just the one. – Nate Lockwood Mar 01 '14 at 18:57
No, this is dart code. See https://api.dartlang.org/apidocs/channels/stable/#dart-dom-html.Element@id_classes – Sungguk Lim Mar 02 '14 at 16:56

How to change custom Check Box border with Dart

2 Answers2