Subject: [css-d] Smaller checkboxes

From: jon at jackinthebox.co.uk ([email-masked])
Date: Thu, 24 Apr 2003 16:28:57 +0100

Michael Abramovich wrote:
> Hello css-d,
>
> is it possible to use css to make checkboxes smaller sized?
>

Michael,

Yes its possible to do this, just set a CSS rule with the width and height
set and apply it to the radio button or checkbox.

I've knocked up a quick demonstration, you can find it at:

http://www.jackinthebox.co.uk/checkboxsize.html

Explorer renders these as you would want them rendered but mozilla causes a
few problems with the checkboxes if you stick a valid doctype in.

Hope this helps.

Jon Tucker

---

From: bmerkey at tampabay.rr.com (Brett Merkey)
Date: Thu, 24 Apr 2003 12:24:25 -0400

| I've knocked up a quick demonstration, you can find it at:
| http://www.jackinthebox.co.uk/checkboxsize.html
| Explorer renders these as you would want them rendered but mozilla causes
a
| few problems with the checkboxes if you stick a valid doctype in.

I feel like I'm getting more for my browser money when I click on those
big ones!

Brett

---

From: ian at hixie.ch (Ian Hickson)
Date: Thu, 24 Apr 2003 10:49:31 -0700 (PDT)

> http://www.jackinthebox.co.uk/checkboxsize.html Explorer renders these
> as you would want them rendered but mozilla causes a few problems with
> the checkboxes if you stick a valid doctype in.

Actually the reason Mozilla stops styling the checkboxes in strict mode is
that the checkboxes have classes that do not match the classes in the
stylesheet. In quirks mode, Mozilla is ignoring the error and treating the
classes as case insensitive, but in strict mode it does the right thing.

If you change the classes to lowercase throughout it works fine.

-- 
Ian Hickson                                      )\._.,--....,'``.    fL
"meow"                                          /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'

---

From: work at cookiecrook.com (James Craig)
Date: Thu, 24 Apr 2003 14:12:29 -0500

>If you change the classes to lowercase throughout it works fine.

I can get the input's clickable area to enlarge in Mozilla and Opera, 
but not the actual visable representation like in IE. Is this a 
preference setting or perhaps related to the XP native form elements?

Here's a screen shot.
http://www.cookiecrook.com/bugtests/screenshots/cb_sizetest.gif

Opera acts about the same except vertically aligned middle instead of 
bottom.

James

-- 
http://www.cookiecrook.com/

---

From: ian at hixie.ch (Ian Hickson)
Date: Thu, 24 Apr 2003 12:34:40 -0700 (PDT)

> http://www.cookiecrook.com/bugtests/screenshots/cb_sizetest.gif

Assuming that shot is of Mozilla, then I would guess that the XP theme you
use doesn't support scaling. What does it look like in IE?

Note that at the moment, styling form controls is not covered by CSS.
While we may be adding more control over this in future levels, at the
moment, UA implementors can basically do what they like.

---

From: work at cookiecrook.com (James Craig)
Date: Thu, 24 Apr 2003 14:57:40 -0500

>use doesn't support scaling. What does it look like in IE?

Yes, that's Mozilla 1.3 on Win XP. IE6 on XP gets the size right, but 
uses the default browser form element appearance (black and white) 
instead of the XP styled form controls. This is the default silver XP 
theme, not any add-on.

James