Sign in to follow this  
Followers 0

[CSS] Styling Checkboxes to Display in Firefox

7 posts in this topic

Posted (edited)

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 by cJr.

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.