Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to change HTML checkbox, radio button look and feel ?

    Hi Folks,
    I am new to CSS. Need help on the following.

    1) Checkboxes/radio buttons should have flat look (with blue outline to the controls) and not the usual HTML 3D look.

    2) Dotted box should not be displayed around the checkbox/radio button on selecting them.

    3) Checkbox/radio button should change state (checked or unchecked) even if we click on the text that succeeds them.

    Thanks in advance
    ChanTheRed.

  • #2
    New Coder
    Join Date
    Jun 2005
    Location
    Stockholm, Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ChanLFC View Post
    Hi Folks,
    I am new to CSS. Need help on the following.

    1) Checkboxes/radio buttons should have flat look (with blue outline to the controls) and not the usual HTML 3D look.

    2) Dotted box should not be displayed around the checkbox/radio button on selecting them.

    3) Checkbox/radio button should change state (checked or unchecked) even if we click on the text that succeeds them.

    Thanks in advance
    ChanTheRed.
    Hello yourself.

    1. Flat look you say. What does that mean? You could replace the graphics with custom images but that would probably involve some css and javascript. I'm pretty sure this question has been discussed at some point before - did you try the search function?

    2. This is an accessibility feature of the browser(s) and should not be disabled.

    3. Surround the checkboxes with label elements. You may want to explicitly associate the labels with the form elements but it's not required - it depends on the source code.
    David Shamloo-Ekblad

    For music addicts: Last.fm | SongMeanings
    Save internet radio: [ 1 ] [ 2 ] [ 3 ]

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    flat look ? as in 2D look and as oppposed to normal HTML 3D look. Please refer attachment comrad.jpg to know exactly what i mean.

    btw, Got around ques 2)
    this.hideFocus = true; just works fine !

    Now, how to go about questions 1), 3) of original post ?

    -Chandan
    Attached Thumbnails Attached Thumbnails How to change HTML checkbox, radio button look and feel ?-comrad.jpg  
    Last edited by ChanLFC; 11-22-2006 at 05:00 AM.

  • #4
    New Coder
    Join Date
    Jun 2005
    Location
    Stockholm, Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's up to the browser how form elements are displayed, what color they may have etc, so there's really only one look and feel by default. If you want to change the look of the different elements you need to create your own graphics. All browsers don't support this though and fortunately, in some cases, the browser has an option to disable form styling. Forms should be easy to use and it's better leaving it up to the browser to set the look and feel. Some users may not recognize form components if you style them too much.

    For a working example, have a look at this site: http://slayeroffice.com/code/custom_checkbox/ (it's not my site)

    As for question 3:
    Code:
    <label><input type="checkbox" name="foo" value="bar" /> Hello, I'm a label.</label>
    David Shamloo-Ekblad

    For music addicts: Last.fm | SongMeanings
    Save internet radio: [ 1 ] [ 2 ] [ 3 ]

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks for the suggestion for ques 1). I will consider it, but it certainly looks costly.

    Your solution for 3) wouldn't exactly do the job for me .I then added a bit of javascript to make it work . It goes something like this...

    <label onclick="this.children(0).checked=!this.children(0).checked"><input type="checkbox" name="foo" value="bar" /> Hello, I'm a label.</label>

    OR

    <label onclick="this.children(0).click()"><input type="checkbox" name="foo" value="bar" /> Hello, I'm a label.</label>


    Thanx for all the info mate
    btw, Just wondering if there could be any other cheap alternative for ques 2) !
    Last edited by ChanLFC; 11-23-2006 at 07:21 AM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by ChanLFC View Post
    Thanks for the suggestion for ques 1). I will consider it, but it certainly looks costly.

    Your solution for 3) wouldn't exactly do the job for me .
    Why? All you have to do is click on the text and the check box is checked.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body>
    <form>
    <label><input type="checkbox" name="foo" id="foo" value="bar" /> Hello, I'm a label.</label>
    </form>
    </body>
    </html>
    I'm not helping you with #2 because you don't seem to have the slightest idea about accessibility. Things are in place for a reason, let them be.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Why? All you have to do is click on the text and the check box is checked.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body>
    <form>
    <label><input type="checkbox" name="foo" id="foo" value="bar" /> Hello, I'm a label.</label>
    </form>
    </body>
    </html>
    I'm not helping you with #2 because you don't seem to have the slightest idea about accessibility. Things are in place for a reason, let them be.
    Well, As far as ques#2 and accessibility stuff are concerned, i can only say that, the dotted box around the controls makes the UI look clumsy. This can be verified when you reply to a thread in this forum for example; i mean, just have a look at the radio buttons(in icons) and checkboxes(in advanced options). They do not show dotted boxes around them on clicking !
    I could only imagine if one didn't have a mouse for some reason in which case dotted boxes may be required to denote the tab order in a given page among the controls. Anyway, the solution to #2, has been discussed in one of my previous posts, in this thread only.

    And, as for ques #3, somehow the state of controls does not change on clicking the text with only the help of label tag. (My version of I.E. is >6. Should it be a problem ? I don't think so. or is it that i am doing something wrong ?) That is why I am using javascript inside label tag.

    Now, only ques #1 remains(refer attachment of post2), (dAEK suggested a link for this->http://slayeroffice.com/code/custom_checkbox/ , but method is too costly).
    For ques#1, I still am trying to find a cheaper css solution if there is one ?!
    Last edited by ChanLFC; 11-23-2006 at 12:29 PM.

  • #8
    New Coder
    Join Date
    Jun 2005
    Location
    Stockholm, Sweden
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Regarding labels:

    for IE you have to either
    1. separate the label from the checkbox (<checkbox> <label>), or even better,
    2. associate the label with the form element by connecting the id of the checkbox with the for-attribute of the label element. Note that a page may not contain duplicate id's.


    There's no need to mess with javascript in this case.
    Last edited by dAEk; 11-23-2006 at 02:18 PM.
    David Shamloo-Ekblad

    For music addicts: Last.fm | SongMeanings
    Save internet radio: [ 1 ] [ 2 ] [ 3 ]

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Not sure what you mean by costly. Either way making custom forms is going to take some time.

    http://www.badboy.ro/articles/2005-07-23/index.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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