SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    915
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.dcman...9&star%5B%5D=3

    Code:
    <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/>
    Code:
    #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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    input[type=checkbox]{outline:1px solid red}
    Or for ie9+ (and others) use the 'checked' pseudo class.
    Code:
    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. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    915
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    Thats perfect, just the job.

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •