By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,369 Members | 1,138 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,369 IT Pros & Developers. It's quick & easy.

Can you change the appearance of a radiobutton or checkbox?

P: n/a
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)

Dec 1 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
In article <11**********************@g14g2000cwa.googlegroups .com>,
ma*********@hotmail.com says...
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)


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.
Dec 1 '05 #2

P: n/a
>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
avascript code.


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.

Dec 1 '05 #3

P: n/a
ma*********@hotmail.com wrote:
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.


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
Dec 1 '05 #4

P: n/a
> 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).


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

Dec 2 '05 #5

P: n/a
Matt Kruse wrote:
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>
Hm, hm.

<URL:http://validator.w3.org/>
<URL:http://www.w3.org/QA/Tips/good-titles>
<script type="text/javascript">
function clickTextCheckbox(obj) {
if (obj.value=="") {
obj.value="P";
}
else {
obj.value="";
}
obj.blur();
You should feature-test DOM methods before you call them.
<http://www.pointedears.de/scripts/test/whatami#test>
[...]
input.checkbox {
border:1px solid black;
font-family:"wingdings 2";


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
Dec 2 '05 #6

P: n/a
Thomas 'PointedEars' Lahn wrote:
<title></title> Hm, hm.


Quit nit-picking about things that have nothing to do with anything.
obj.blur();

You should feature-test DOM methods before you call them.


Not in controlled environments.
font-family:"wingdings 2";

Sorry, no "Wingdings 2" font here, and you did not provide an
alternative font.


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


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
Dec 2 '05 #7

P: n/a
> 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.

Dec 5 '05 #8

P: n/a
marc said the following on 12/5/2005 3:45 AM:
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.


The script that Matt provided is "too much effort"? Yeesh.
Or atleast it seems to be that way, at first sight.


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/
Dec 5 '05 #9

P: n/a
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.

Dec 5 '05 #10

P: n/a
marc wrote:
It also involves installing wingdings on every client machine, if I am
not mistaking?
Correct.
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.


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
Dec 5 '05 #11

P: n/a
> (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.

Dec 5 '05 #12

P: n/a
marc wrote:
(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


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>.
or something,


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
Dec 6 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.