asked on

Styling a checkbox

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

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Nrisimha

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

steva

ASKER

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?

SOLUTION

Nrisimha

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

steva

ASKER

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.

Nrisimha

Thank you steva !

regards

Nrisimha