Can you change the appearance of a radiobutton or checkbox?

marcwentink · Dec 1, 2005

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)

Asterbing · Dec 1, 2005

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.

marc · Dec 1, 2005

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.

Matt Kruse · Dec 1, 2005

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

ointer;
}
</style>
</head>
<body>
<form>
<input type="text" class="checkbox" size="1"
onClick="clickTextCheckbox(this)" onFocus="this.blur();">
</form>
</body>
</html>

marc · Dec 2, 2005

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

Thomas 'PointedEars' Lahn · Dec 2, 2005

Matt said:
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/>

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

[...]
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

Matt Kruse · Dec 2, 2005

Thomas said:
Hm, hm.

Quit nit-picking about things that have nothing to do with anything.

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

Not in controlled environments.

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.

marc · Dec 5, 2005

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.

Randy Webb · Dec 5, 2005

marc said the following on 12/5/2005 3:45 AM:

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.

marc · Dec 5, 2005

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.

Thomas 'PointedEars' Lahn · Dec 5, 2005

marc said:
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

marc · Dec 5, 2005

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

Thomas 'PointedEars' Lahn · Dec 6, 2005

marc said:
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 said:
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

How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Help figuring out a directory permission change problem	1	May 12, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
How to write a program whose input various information of the companies	3	Aug 24, 2022
How to change the default error icon of MUI Stepper	0	Jul 15, 2022
Looking to change programming direction	1	Aug 10, 2022
Did you know that there is a match-case function in python?	4	Dec 17, 2023
Detecting status change in a checkbox	4	Sep 29, 2008

Can you change the appearance of a radiobutton or checkbox?

marcwentink

Asterbing

marc

Matt Kruse

marc

Thomas 'PointedEars' Lahn

Matt Kruse

marc

Randy Webb

marc

Thomas 'PointedEars' Lahn

marc

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads