[CSS] Styling Checkboxes to Display in Firefox

[Calum Veteran]

Hi :)

I am currently creating my forums and website for an assignment at university and I have already styled the textboxes and buttons on my forms however, today I did my registration form and I ran into a problem styling the checkbox.

The CSS code I added works in Opera. The checkbox is styled exactly as I want it in Opera (although it has a weird border colour) but it doesn't work in Firefox, Internet Explorer, Safari and Chrome :/

I only care about Firefox at the moment as my deadline is fast approaching and I am months behind but I care a lot about design and while this may not be the final design of my website, it will be similar and I love the way I have done textboxes and buttons, therefore I really just can't leave this one.

Does anybody know of a way to style the checkbox show the customisation shows up in Firefox (for example how it currently shows in Opera for my website)?

Also, while I'm here, does anybody know how to better position form elements (textboxes, buttons, etc) instead of using the "margin-left" attribute (and other "margin" attributes)? That seems to be the only thing that works (and it doesn't work all that well) :s

Any help would be much appreciated thank you :)

Here is my website with the problem: http://homepages.shu.ac.uk/~cjricha2/register471.php

Here is the CSS code I am currently using for the checkbox:

input#rules-agreement-checkbox {
	background-color: #777776;
	background-image: url("background_checkbox.png");
	border: 1px;
	border-style: groove;
	border-color: #414141;
	height: 15px;
	width: 15px;
	font-size: 7px;
	color: #F9A007;
	margin-left: 100px;
}

Edited January 5, 2009 by cJr.

[thePrince]

Sorry, you can't style checkboxes (and radio buttons) with CSS alone. Check this and this out.

[shh]

Last attempt to post ...

 

This piece of CSS does work with FF.

The "zoom" is meant to make the checkboxes the same size in IE as in FF.

 

 

.BigCheckbox {
    -moz-appearance: none;
    height: 25px;
    width: 25px;
    zoom: 1.2;
}

[Eraclio]

If it's still actual, you can use checked pseudo-element in CSS3. Using this element, you can do checkbox from label tag, and label tag can be applied with any CSS styles as a regular div or span. Here is example on how it works - styling checkbox as toggle button using only CSS3. Anyway using it, you want have any problems with different appearance in all browsers.

[Seahorsepip Veteran]

I always write just 2 labels first one is the checkbox and second one is actual label.

Then I hide the input element with css. Style the first label as a checkbox and use input:checked + label to style the checked state of the first label.

[Eraclio]

  On 23/08/2014 at 22:53, Seahorsepip said:

I always write just 2 labels first one is the checkbox and second one is actual label.

Then I hide the input element with css. Style the first label as a checkbox and use input:checked + label to style the checked state of the first label.

Also, for attribute in label must have equl value as id attribute in input to trigger click for real hidden checkbox.

[Seahorsepip Veteran]

  On 25/08/2014 at 18:57, Eraclio said:

Also, for attribute in label must have equl value as id attribute in input to trigger click for real hidden checkbox.

Ofcourse otherwise we lose the whole point of using a label element ^^