Can you change the appearance of a radiobutton or checkbox?

Can you change the appearance of a radiobutton or checkbox?

I do not mean the apearance changes from checked to not checked or
disabled or not disabled, but change the appearance (of all these
states) to a total different set of images defined by img files?

Probably not I think?

Reason is I want some checkboxes to look a bit different then the
standard ones to implicitly say that these checkboxes have some special
function.

(Ok that's a bit vage, I know)

In article <1133448809.114807.257690@g14g2000cwa.googlegroups .com>,
marcwentink@hotmail.com says...[color=blue]
> Can you change the appearance of a radiobutton or checkbox?
>
> I do not mean the apearance changes from checked to not checked or
> disabled or not disabled, but change the appearance (of all these
> states) to a total different set of images defined by img files?
>
> Probably not I think?
>
> Reason is I want some checkboxes to look a bit different then the
> standard ones to implicitly say that these checkboxes have some special
> function.
>
> (Ok that's a bit vage, I know)
>
>[/color]

You could create your own images set. Then change the current one and
set value of an hidden field (or variable) on the onClick event, through
javascript code.

>You could create your own images set. Then change the current one and[color=blue]
>set value of an hidden field (or variable) on the onClick event, through
>avascript code.[/color]

That seems to be too much effort for a too little appearance frange,
nothing easy out of the box I could use then? I would skip this then
until people really start to jangle that they cannot live without the
special looking checkbox!

But thanks for the suggestion of course.

marcwentink@hotmail.com wrote:[color=blue]
> Reason is I want some checkboxes to look a bit different then the
> standard ones to implicitly say that these checkboxes have some
> special function.[/color]

I've done something like this before and it worked well, but it depends on
your environment (having the wingdings 2 font available for all users).

<html>
<head>
<title></title>
<script type="text/javascript">
function clickTextCheckbox(obj) {
if (obj.value=="") {
obj.value="P";
}
else {
obj.value="";
}
obj.blur();
}
</script>
<style type="text/css">
input.checkbox {
border:1px solid black;
font-family:"wingdings 2";
cursor:pointer;
}
</style>
</head>
<body>
<form>
<input type="text" class="checkbox" size="1"
onClick="clickTextCheckbox(this)" onFocus="this.blur();">
</form>
</body>
</html>

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

> I've done something like this before and it worked well, but it depends on[color=blue]
> your environment (having the wingdings 2 font available for all users).[/color]

Well it is an intranet application not internet, so I can manage
certain standards on the client side, thanks for the suggestions

Matt Kruse wrote:
[color=blue]
> I've done something like this before and it worked well, but it depends on
> your environment (having the wingdings 2 font available for all users).
>
> <html>
> <head>
> <title></title>[/color]

Hm, hm.

<URL:http://validator.w3.org/>
<URL:http://www.w3.org/QA/Tips/good-titles>
[color=blue]
> <script type="text/javascript">
> function clickTextCheckbox(obj) {
> if (obj.value=="") {
> obj.value="P";
> }
> else {
> obj.value="";
> }
> obj.blur();[/color]

You should feature-test DOM methods before you call them.
<http://www.pointedears.de/scripts/test/whatami#test>
[color=blue]
> [...]
> input.checkbox {
> border:1px solid black;
> font-family:"wingdings 2";[/color]

Sorry, no "Wingdings 2" font here, and you did not provide an alternative
font. Use Unicode character references (or hard-coded UTF sequences with
proper encoding declaration) instead. (I, too, made that particular
mistake before.)

<URL:http://ppewww.ph.gla.ac.uk/~flavell/unicode/unidata.html>

PointedEars

Thomas 'PointedEars' Lahn wrote:[color=blue][color=green]
>> <title></title>[/color]
> Hm, hm.[/color]

Quit nit-picking about things that have nothing to do with anything.
[color=blue][color=green]
>> obj.blur();[/color]
> You should feature-test DOM methods before you call them.[/color]

Not in controlled environments.
[color=blue][color=green]
>> font-family:"wingdings 2";[/color]
> Sorry, no "Wingdings 2" font here, and you did not provide an
> alternative font.[/color]

I already said that it depends on your environment, and having wingdings2
available.
[color=blue]
> Use Unicode character references (or hard-coded
> UTF sequences with proper encoding declaration) instead. (I, too,
> made that particular mistake before.)[/color]

It's not a mistake. My machine/browser doesn't display the appropriate
unicode character, yet it displays the wingdings 2 character.

My example was a simple "proof of concept" and I qualified it by saying that
it dependeds on the user's environment. If you don't like it, don't use it.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

> Not in controlled environments.

It's an intranet, so it is absolutely controlled. The only thing is,
that it is too much effort, for too little gain.

Or atleast it seems to be that way, at first sight. I will remember
your suggestion. If this would be absolutely necesarry for the
application, I will try it. But first I'll go back and ask if the
present state of the program is sufficient.

So thanks.

marc said the following on 12/5/2005 3:45 AM:[color=blue][color=green]
>>Not in controlled environments.[/color]
>
>
> It's an intranet, so it is absolutely controlled. The only thing is,
> that it is too much effort, for too little gain.[/color]

The script that Matt provided is "too much effort"? Yeesh.
[color=blue]
> Or atleast it seems to be that way, at first sight.[/color]

It's a simple onclick with a function and onfocus. Simple to add.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

It also involves installing wingdings on every client machine, if I am
not mistaking? That is more effort, if not the installing, the
procedures to change the client environment, getting the permission,
and questions to support if the thing does not work.

marc wrote:
[color=blue]
> It also involves installing wingdings on every client machine, if I am
> not mistaking?[/color]

Correct.
[color=blue]
> That is more effort, if not the installing, the procedures to change the
> client environment, getting the permission, and questions to support if
> the thing does not work.[/color]

Therefore you should use Unicode characters instead. It may be possible,
however unlikely, that your systems lack the required Unicode font. For
example, Windows 2k+ systems come with OpenType fonts that provide Unicode
support. (You have not told yet which OS/GUI we are talking about here.)

However, what you are asking for (change the appearance of a radiobutton
or checkbox) is not really possible with client-side scripting. Matt's
is a nice approach, but it is not half of what would be required for
proper emulation of those controls.

You could configure your GUI but that would involve probably not less
effort than installing a font.

Talking about controlled environments, maybe XUL (Gecko-based) or HTA
(IE-based) provide what you are looking for.

HTH

PointedEars

> (You have not told yet which OS/GUI we are talking about here.)

The client side is windows possibly 2000 and XP, IE and Mozilla. HTML
4.

If this cannot be done by a standard option like a img=... tag in HTML
or something, I am going to present this first like it. If they really
want to other kind of checkbox, I will check again.

marc wrote:
[color=blue][color=green]
>> (You have not told yet which OS/GUI we are talking about here.)[/color]
>
> The client side is windows possibly 2000 and XP, IE and Mozilla. HTML
> 4.
>
> If this cannot be done by a standard option like a img=... tag in HTML[/color]

No, it cannot really. Yet. CSS3 Basic User Interface Module, currently
a Candidate Recommendation (CR; working draft status), introduces means
to format controls they way you wish. However, Mozilla/5.0, usually the
leading implementation of CSS features, does not fully support this yet.
For example, it is possible to resize the ckeckbox and define a background
image for different states of it, but it appears not to be possible
to prevent displaying the check mark in it when checked (with
appearance:normal) or remove the border of it (border:none). Tested
with Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050922
Firefox/1.0.7 (Debian package 1.0.7-1) Mnenhy/0.7.2.0.

See <URL:http://www.w3.org/TR/css3-ui/#user-interface>.
[color=blue]
> or something,[/color]

That depends on how far you are willing to go for "something".

For example, it can be done with `img' elements that change src when
clicked. But you need to be aware that you may have to reinvent their
functionality, including disabled and read-only states, and form
submission.

And as I said, it may be possible with special controls in in XUL or
HTA, but that would not be HTML anymore.

PointedEars