Styling a checkbox

steva
steva used Ask the Experts™
on
I have a simple page, below, with a checkbox element but I'm not able to style the checkbox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_checkbox.html</title>
<style type="text/css">

input#outside {
	background-color:green;
	border:solid red 1px;
	padding:10px;
	margin:5px;
	cursor:pointer;
	color:#ffffff;
	-moz-border-radius: 40px; -webkit-border-radius: 40px;
}
</style>
</head>

<body>
	<form   name="expressform" method="post" action='test_textarea.php' >
          <input type='checkbox' id="outside" name='ouside'/> Check if you are outside the US</p> 
          <button type="submit">SUBMIT</button>

    </form>
</body>
</html>

Open in new window


As you see in the <style> section, I'm trying to do all kinds of nifty stuff to it but nothing has any affect at all.  I know that the CSS Input#outside selector selects the checkbox because if I put in a display:none the checkbox goes away.

Does anyone see the problem?

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011
Commented:
I've found this page to be a useful reference for styling checkboxes;
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Commented:




Look at this watching in Firefox. I think that this styling has no effect with such code:

http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/#ff2-xp

But at this web page look at the IE examples.

And correct this:

id="outside" name='ouside'/>

to:  id="outside" name='outside' />

regards

Nrisimha

Author

Commented:
Thanks for the links, but these are to ways to replace the checkbox with an external image.  Is there no way to style checkboxes directly with CSS in Firefox?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:

Yesterday I found this answer on an forum. The question is about :

[CSS] Styling Checkboxes to Display in Firefox

Look at the answer:

http://www.neowin.net/forum/topic/717734-css-styling-checkboxes-to-display-in-firefox/

And when you click on the links you will get a page where you can download a Javascript code ( or file ) and CSS file.

The link is:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

And look at download links and explanations for JS file and CSS file under chapter "How does it work" where are two links:

Download the full script

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js

Download the CSS file

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/form.css


regards

Nrisimha





Author

Commented:
Ok.  These are both pointing to methods of replacing checkboxes rather than styling them, but I guess that's all there is.  I split the points.

Thanks.

Commented:

Thank you steva !

regards

Nrisimha

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial