Jump to content



Photo

[CSS] Styling Checkboxes to Display in Firefox


  • Please log in to reply
6 replies to this topic

#1 vetCalum

Calum

    Neowinian Senior

  • Joined: 10-January 07

Posted 05 January 2009 - 16:05

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...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 by cJr., 05 January 2009 - 16:16.



#2 thePrince

thePrince

    Neowinian

  • Joined: 08-May 08

Posted 06 January 2009 - 00:55

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

#3 shh

shh

    Neowinian

  • Joined: 29-March 14

Posted 29 March 2014 - 12:38

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;
}



#4 Eraclio

Eraclio

    Neowinian

  • Joined: 23-August 14

Posted 23 August 2014 - 22:13

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.



#5 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 23 August 2014 - 22:53

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.

#6 Eraclio

Eraclio

    Neowinian

  • Joined: 23-August 14

Posted 25 August 2014 - 18:57

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.



#7 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 25 August 2014 - 19:01

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