18 replies [Last post]
auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

I have been trying to change the size of checkboxes using

input.checkbox  {  
	 width : 1em ; 
	 height : 1em ;    
	}

and then
<INPUT type='checkbox' class='checkbox'...etc"
It works in IE 6 and Opera but not in Firefox. Is there a way to do this in Firefox?

Anonymous
Anonymous's picture
Guru

Re: Changing the size of checkboxes

auckman wrote:
Is there a way to do this in Firefox?
Heck, I didn't think you could do it in IE or Opera either. Laughing out loud

Aren't check boxes dependent upon the OS and not able to be styled? :? :? :?

auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

Changing the size of checkboxes

No nor did I but it works. Also..it works in Firefox but the padding is different..my mistake. So I need to work out how to make the padding the same.

Anonymous
Anonymous's picture
Guru

Changing the size of checkboxes

I'd like to see a working example. Smile Thanks.

auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

Changing the size of checkboxes

OK ...stick this in your browser. Laughing out loud

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
input.checkbox  {
	width : 0.5em;
	height :0.5em;
	padding: 0px;
	margin: 0px;
	}

-->
</style>
</head>

<body>
<table  border="1" >
  <tr>
    <td ><input type="checkbox" name="checkbox"  class ="checkbox" value="checkbox"></td>
    <td ><input type="checkbox" name="checkbox" class ="checkbox"  value="checkbox"></td>
    <td ><input type="checkbox" name="checkbox" class ="checkbox"  value="checkbox"></td>
  </tr>
  <tr>
    <td ><input type="checkbox" name="checkbox"   value="checkbox"></td>
    <td ><input type="checkbox" name="checkbox"   value="checkbox"></td>
    <td ><input type="checkbox" name="checkbox"   value="checkbox"></td>
  </tr>
  
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 9 weeks 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Changing the size of checkboxes

So you can make them smaller than the default, but not larger.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

Changing the size of checkboxes

Yes you can ..if you change the 0.7 to 10 in the style you get an enormous checkbox.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 9 weeks 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Changing the size of checkboxes

Not in Firefox - you just get more space around the checkbox.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

Changing the size of checkboxes

Yes you are right ..why is that?

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 11 weeks 4 days ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Changing the size of checkboxes

Try this..

.large {  
width: 6em; 
height: 6em;}	
	
.medium {  
width: 4em; 
height: 4em;}	
	
.checkbox{
display: inline;
padding:0;
height: 30px;
width: 30px;
}
<input type="checkbox" name="Check1" class="large">
<input type="checkbox" name="Check2" class="medium">
<input type="checkbox" name="checkbox" class="checkbox">

www.powerbitwebdesign.com Powerbit your custom web design company

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Changing the size of checkboxes

FF 1.5Beta allows them to be styled larger. It still doesn't allow you to apply your own colour scheme.

Opera 8, increases the size of the arrow but not the square, so the arrow is cropped for width. It does let you apply a colour scheme, however there is an indeterminate space between the border and the square which doesn't receive the element's background colour.

Anonymous
Anonymous's picture
Guru

Changing the size of checkboxes

auckman wrote:
OK ...stick this in your browser. Laughing out loud
I'm really not that bothered about it. Let me know when you post a link. Smile

auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

Changing the size of checkboxes

Anonymous
Anonymous's picture
Guru

Changing the size of checkboxes

Not seeing it.

auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

Changing the size of checkboxes

You must be using Firefox so you will not see the enlarged checkboxes ..they will just look normal but you should see the reduced ones.

Anonymous
Anonymous's picture
Guru

Changing the size of checkboxes

Using IE.

auckman
Offline
newbie
Last seen: 9 years 12 weeks ago
Joined: 2005-09-27
Posts: 8
Points: 0

Changing the size of checkboxes

You are having me on..right?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 9 weeks 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Changing the size of checkboxes

I think Triump uses a Mac, so that might have something to do with it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

rmfred
Offline
Elder
Rock Springs, WY
Last seen: 11 weeks 4 days ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Changing the size of checkboxes

I see them fine in FF.
BTW... that is exactly the same code I posted earlier in this thread.

www.powerbitwebdesign.com Powerbit your custom web design company