Checkbox size

Howdy. I’ve a checkbox that is reasonable size in FF but in IE it’s very small. I’ve tried resizing with css but that doesn’t work. Anyone have any experience with this?

Thanks

Are you trying to style it at all? Leave them unstyled in browsers because they weren’t meant to be styled.

That being said, we will need a site to look at where we can look at the issue :).

If a site is unable to be posted (which would speed up the debvugging process if we did have a site) then we need full HTML and CSS to reproduce it on our end.

I’m working locally. It’s a simple label/checkbox in a form


<form>
<label class="rem_me"><input name="rememberme" id="rememberme" type="checkbox" value="forever" /> Remember me</label>
</form>

Here is the css for the label.


div#log_reg label.rem_me {
	margin: 10px auto 15px;
	height:15px;
	border:1px solid red;
}

The checkbox is 15px X 15px in FF 3.5.7 and about 5px X 5px in IE 8

Thanks

That piece of code renders the same in Opera, FF, IE6, IE7 and IE8 locally for me. Maybe there’s something else going on in the rest of your code?

Any chance of the full HTML and CSS, like Ryan suggested?

Checkboxes weren’t meant to be styled and I’m afraid that styling them basically at all won’t produce the results you desire.

You could meddle in JS to achieve this, but pure CSS alone won’t get you waht you want

Thanks for the quick responses. Since I’m one not to give up easily Luki_b has driven me to look at my code to track to the offending code before I bother you guys any further. I’ll try one more time before posting all the code. Thanks again.

Ryan

Checkboxes weren’t meant to be styled and I’m afraid that styling them basically at all won’t produce the results you desire.
I wasn’t aware of this limitation. Thanks!

It’s not just checkboxes, other form elements as well! <select>/<option>'s as well :slight_smile:

Hi Tsalagi,

Hope you fixed the issue. I was having the same problem here. Thanks to Ryan for his suggestions also. I had to take out the styles to get it done.

Have a look at this article which shows the differences between browsers where form controls are concerned.

Chances are that if you are applying a style correctly and it is not showing then that browser does not allow you to change that property on a form control.

As others have said it’s best to leave form controls alone especially check boxes, radio buttons and selects. Other form elements such as text boxes, textareas and submits can be styled a bit better but there are still limits between browsers.

A lot of the styling of form controls is done by the browser and can’t be easily over-ridden.