SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member yourinteractive's Avatar
    Join Date
    Aug 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change the checkbox border's color

    I want to change the checkbox's border color, see the attached.

    this effect isn't i want:
    HTML Code:
    .style{ border:solid #ff0000 1px;}
    email me
    AIM:fandong51

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is no way to style form elements cross-browser as the os usually tkes care of most of this.

    This code will work in Opera, look odd in IE and do nothing in Firefox.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    .cbox{border:1px solid red;background:yellow;}
    
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <div>
            <label>
            <input class="cbox" type="checkbox" name="checkbox" value="checkbox" />
            test</label>
        </div>
    </form>
    </body>
    </html>
    Chances are that if you apply a style to a form element and it doesn't get applied then that element can't be styled in that way n that browser.

    More info here:

  3. #3
    SitePoint Member yourinteractive's Avatar
    Join Date
    Aug 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, this effect isn't i want. the shadow still show.

    email me
    AIM:fandong51

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because Paul told you....

    This code will work in Opera, look odd in IE and do nothing in Firefox.
    I suspect you're looking in IE?

    Form controls are troublesome to style and impossible to get consistency cross browser so they're usually best left alone not only for this reason but also because users are familiar with how form controls look and changing them is likely to confuse users rather than improve usability.

    Apart from maybe using an image for a submit button and altering the default font, I'd generally leave form controls as their default style.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes, I'm sorry I wasn't clear enough

    What I've shown you is all that you can do.

    You can see here what happens in other browers to see how futile this kind of thing is:

    http://www.456bereastreet.com/lab/fo...ls/checkboxes/

    It's best to leave them alone as that's what users expect. If you really must have something different then the only option is some sort of javascript replacement which is beyond the scope of CSS.

  6. #6
    SitePoint Member yourinteractive's Avatar
    Join Date
    Aug 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Resolved!
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CHECKBOX</title>
    <style type="text/css">   
      .chx{cursor:default;background-color:#ffffff;border:1px solid #ff0000;font-weight:bold;font-size:12px;width:13px;height:13px;color:#369}   
      </style> 
    </head>
    
    <body>
    <form   name="ss"   onsubmit="return   false">   
        
      <input   type="input"   name="c"   value="√"   class="chx"   onclick="this.value=this.value=='√'?'':'√';"   readonly>  
      </form>   
    
    </body>
    </html>
    email me
    AIM:fandong51

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That invalid markup (inline-level input as immediate child of form is not allowed in a Strict DTD, and if you insist on 'XHTML' you must close the <input> tag).

    It's not a good solution anyway, because it will not work if JavaScript is disabled or unsupported.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This not working without JavaScript would worry me the most as it will simply appear as though it's broken which you may not think as a huge issue but if I visited a site and something like this didn't work then I certainly wouldn't trust the site to store my personal details, credit card information.

    There are probably some solutions using external JavaScript which will do what you want it to do but will also leave the form unstyled for users without JavaScript which would be a much better approach as you won't be excluding any of your visitors.


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
  •