Test case: img in option in select

Test description

Testing several methods to choose images when they are part of input checkboxes in html web pages. Reason: we want to offer a selection of images. At the same time: testing support of attribute styles.

The following browsers are tested:

1. Opera 10
2. Google Chrome 3
3. Mozilla Firefox 3 and 3.5
4. MS Internet Explorer 7

The following CSS is used:

html, body, form, fieldset { background-color: #fff; color: #000}
input[type=checkbox], input[type=checkbox] + img {padding: 3mm; background-color:#fff}
input[checked=checked], input[checked=checked] + img{background-color:#000}
input[type=checkbox][checked=checked], input[type=checkbox][checked=checked] + img{background-color:#ccf}
input[type=checkbox]:hover, input[type=checkbox]:hover + img{ background-color:#cfc}
input[type=checkbox][checked=checked]:hover, input[type=checkbox][checked=checked]:hover + img{background-color:#fcc}

Test

Method 1: Img as child element of checkbox input, without label

Img.click == Checkbox.checked:

None of the tested browsers. All show a similar visual, but clicking the images fails select the checkbox. This is expected behaviour. The image is placed inside the input element. The browsers render this as if the image were placed adjacently. Without a label, the browsers find no connection between the image and the checkbox input.

Attribute styles: padding on a checkbox input

Opera and MSIE7, but differently: Opera places the padding INSIDE the checkbox, MSIE7 places it OUTSIDE.

Attribute styles: colouring of checkbox depending on checkbox.checked

Opera only.

Attribute styles: colouring of image depending on checkbox.checked

All except MSIE7, but no browser changes the colour on demand (checking the checkbox should change its colour and perhaps that of the image, but neither happens)

Attribute styles: colouring of checkbox and image depending on checkbox.hover

Opera and MSIE7, but MSIE7 attributes the wrong (green) colour instead of the correct (red) colour, and no browser changes the colour on demand. The other browsers only colour the image.

Attribute styles: colouring of checkbox and image depending on image.hover

None.

Method 2: Img as child element of checkbox input, inside label, with implicit for

Img.click == Checkbox.checked:

Firefox 3 and 3.5., Opera 10, Google Chrome 3. This is unexpected behaviour, though it does make sense. The image is placed inside the input element. The browsers render this as if the image were placed adjacently. With the label, the browsers find the connection between the image and the checkbox input. MSIE7 does show a similar visual, but clicking the images fails select the checkbox. That is expected behaviour.

Attribute styles: padding on a checkbox input

Opera and MSIE7, but differently: Opera places the padding INSIDE the checkbox, MSIE7 places it OUTSIDE.

Attribute styles: colouring of checkbox depending on checkbox.checked

Opera only.

Attribute styles: colouring of image depending on checkbox.checked

All except MSIE7, but no browser changes the colour on demand (checking the checkbox should change its colour and perhaps that of the image, but neither happens)

Attribute styles: colouring of checkbox and image depending on checkbox.hover

Opera and MSIE7, but MSIE7 attributes the wrong (green) colour instead of the correct (red) colour, and no browser changes the colour on demand. The other browsers only colour the image.

Attribute styles: colouring of checkbox and image depending on image.hover

None. Google Chrome 3 only colours the image.

Method 3: Img adjacent to checkbox input, inside label, with implicit for

Img.click == Checkbox.checked:

Firefox 3 and 3.5., Opera 10, Google Chrome 3. This is expected behaviour. MSIE7 does show a similar visual, but clicking the images fails select the checkbox. That is unexpected.

Attribute styles: padding on a checkbox input

Opera and MSIE7, but differently: Opera places the padding INSIDE the checkbox, MSIE7 places it OUTSIDE.

Attribute styles: colouring of checkbox depending on checkbox.checked

Opera only.

Attribute styles: colouring of image depending on checkbox.checked

All except MSIE7, but no browser changes the colour on demand (checking the checkbox should change its colour and perhaps that of the image, but neither happens)

Attribute styles: colouring of checkbox and image depending on checkbox.hover

Opera and MSIE7, but MSIE7 attributes the wrong (green) colour instead of the correct (red) colour, and no browser changes the colour on demand. The other browsers only colour the image.

Attribute styles: colouring of checkbox and image depending on image.hover

None. Google Chrome 3 only colours the image.

Method 4: Img adjacent to checkbox input, inside label, with explicit for

Img.click == Checkbox.checked:

Firefox 3 and 3.5., Opera 10, Google Chrome 3. This is expected behaviour. MSIE7 does show a similar visual, but clicking the images fails select the checkbox. That is unexpected.

Attribute styles: padding on a checkbox input

Opera and MSIE7, but differently: Opera places the padding INSIDE the checkbox, MSIE7 places it OUTSIDE.

Attribute styles: colouring of checkbox depending on checkbox.checked

Opera only.

Attribute styles: colouring of image depending on checkbox.checked

All except MSIE7, but no browser changes the colour on demand (checking the checkbox should change its colour and perhaps that of the image, but neither happens)

Attribute styles: colouring of checkbox and image depending on checkbox.hover

Opera and MSIE7, but MSIE7 attributes the wrong (green) colour instead of the correct (red) colour, and no browser changes the colour on demand. The other browsers only colour the image.

Attribute styles: colouring of checkbox and image depending on image.hover

None. Google Chrome 3 only colours the image.

Method 5: Img as only element inside label with explicit for, for a separate list of checkbox inputs

Img.click == Checkbox.checked:

Firefox 3 and 3.5., Opera 10, Google Chrome 3. This is expected behaviour. MSIE7 does show a similar visual, but clicking the images fails select the checkbox. That is unexpected.

Attribute styles: padding on a checkbox input

Opera and MSIE7, but differently: Opera places the padding INSIDE the checkbox, MSIE7 places it OUTSIDE.

Attribute styles: colouring of checkbox depending on checkbox.checked

Opera only.

Attribute styles: colouring of image depending on checkbox.checked

None. This is expected.

Attribute styles: colouring of checkbox and image depending on checkbox.hover

None. This is expected for the images, but unexpected for the checkbox inputs. Opera and MSIE7 only colour the checkbox, but MSIE7 attributes the wrong (green) colour instead of the correct (red) colour, and no browser changes the colour on demand.

Attribute styles: colouring of checkbox and image depending on image.hover

None. This is expected.

What we hope to see:

Picture 1: methods 1, 2, 3, 4.	Picture 2: method 5.

Currently supported by:

Firefox 3 and 3.5., Opera 10, Google Chrome 3, using method 1 to 5. MSIE7 fails to select the checkboxes when clicking the images, for all methods.

Conclusion

Offering images in checkbox inputs can be used in all modern browsers, except MSIE7. That browser may require a bit of javascript. Styling of checkbox inputs and images differs greatly among the varying browsers. Dynamic styling via attribute selectors seems absent in all tested browsers.