On select of checkbox border working in IE, but not other browsers

HTML & CSS
1

Im trying to add a border around a checkbox when its selected and it looks great in IE but isnt working in Mozilla, Opera & Chrome.

http://devchecksafetyfirst.csf.dcmanaged.com/?regions[]=288&regions[]=159&star[]=3


<input type="checkbox" name="regions[]" value="<?=$q['Id_Rsrt']?>" onClick="javascript:checkRefresh()" <?=((in_array($q['Id_Rsrt'], $_REQUEST['regions'])) ? "checked=\\"checked\\" id=\\"checkThat\\" " : "")?> class="inline" id="checkBox" /> <?=$q['Nom_Rsrt']?><br/>



#checkThat{
border:#900 solid 1px;
margin-right:1px;
margin-top:1px;
margin-bottom:1px;
}
#checkBox{
margin-right:3px;
margin-top:2px;
margin-bottom:2px;
}

is it just one of those things, or is there a work around for this.

2

Hi,

That isn’t supported in most browsers so you are out of luck. You could instead use outline which is better supported but only IE moves it away from the checkbox.


input[type=checkbox]{outline:1px solid red}

Or for ie9+ (and others) use the ‘checked’ pseudo class.


input[type=checkbox]{outline:1px solid yellow;}
input:checked{outline:1px solid red;}

Or you could use this technnique but it’s a lot of work.

3

Thanks Paul,

Thats perfect, just the job.

Cheers