...

View Full Version : How to change HTML checkbox, radio button look and feel ?



ChanLFC
11-21-2006, 11:07 AM
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.

dAEk
11-21-2006, 11:58 PM
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. :)


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?


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


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.

ChanLFC
11-22-2006, 05:55 AM
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) :cool:
this.hideFocus = true; just works fine !

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

-Chandan

dAEk
11-22-2006, 12:18 PM
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:

<label><input type="checkbox" name="foo" value="bar" /> Hello, I'm a label.</label>

ChanLFC
11-23-2006, 07:59 AM
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 :cool: . 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 :thumbsup:
btw, Just wondering if there could be any other cheap alternative for ques 2) !

_Aerospace_Eng_
11-23-2006, 08:22 AM
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.


<!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.

ChanLFC
11-23-2006, 01:25 PM
Why? All you have to do is click on the text and the check box is checked.


<!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 ?!

dAEk
11-23-2006, 03:14 PM
Regarding labels:

for IE you have to either

separate the label from the checkbox (<checkbox> <label>), or even better,
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. :)

_Aerospace_Eng_
11-23-2006, 06:51 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum