/SubText/Images desired colour. Take the following HTML for example:
<input type="checkbox" style="background: blue"/>
This results in a checkbox that looks like this:
The following post shows how one can use a directx transform to set the transparency on a checkbox so that the background shows through and it appears to have a coloured background. The author also uses clipping to hide the background area around the checkbox.
<div style="width:14px;height:14px;clip:rect(0 14 14 0);overflow:hidden;">
<span style="background: blue;position:relative;top:-3px;left:-3px;">
<input type="checkbox" style="margin:0; padding:0; FILTER: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=50); -moz-opacity:0.5">
</span>
</div>
The result is a checkbox that looks like this: CheckboxWithColouredBackground.htm. It's a fun technique but unfortunately not all that practical given the amount of extra markup one has to add to get it to work. Another problem with this approach is that the checkbox doesn't really look like a checkbox.
I decided to see if I could use a similar approach but come up with a solution that was simpler and looked better. The solution I came up with used two elements and a background image (
). By setting the opacicty of the checkbox I allowed the background image of the containing element to show through thereby giving the impression of a coloured background. Here is the code:
<style>
.ColouredCheckBox
{
background: url(checkbox.gif) no-repeat center center;
padding-left: 3px;
}
.ColouredCheckBox input
{
margin:0;
padding: 0;
FILTER: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=80);
}
</style>
<span class="ColouredCheckBox">
<input type="checkbox"/>
</span>
And you can see it in action here:
CheckboxWithBackgroundImage.htm