How to change the checkbox border's color

I want to change the checkbox’s border color, see the attached.

this effect isn’t i want:

.style{ border:solid #ff0000 1px;}

Hi,

There is no way to style form elements cross-browser as the os usually tkes care of most of this.

This code will work in Opera, look odd in IE and do nothing in Firefox.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.cbox{border:1px solid red;background:yellow;}

</style>
</head>
<body>
<form id="form1" method="post" action="">
    <div>
        <label>
        <input class="cbox" type="checkbox" name="checkbox" value="checkbox" />
        test</label>
    </div>
</form>
</body>
</html>


Chances are that if you apply a style to a form element and it doesn’t get applied then that element can’t be styled in that way n that browser.

More info here:

sorry, this effect isn’t i want. the shadow still show.

That’s because Paul told you…

This code will work in Opera, look odd in IE and do nothing in Firefox.

I suspect you’re looking in IE?

Form controls are troublesome to style and impossible to get consistency cross browser so they’re usually best left alone not only for this reason but also because users are familiar with how form controls look and changing them is likely to confuse users rather than improve usability.

Apart from maybe using an image for a submit button and altering the default font, I’d generally leave form controls as their default style.

Yes, I’m sorry I wasn’t clear enough :slight_smile:

What I’ve shown you is all that you can do.

You can see here what happens in other browers to see how futile this kind of thing is:

http://www.456bereastreet.com/lab/form_controls/checkboxes/

It’s best to leave them alone as that’s what users expect. If you really must have something different then the only option is some sort of javascript replacement which is beyond the scope of CSS.

Resolved!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CHECKBOX</title>
<style type="text/css">
  .chx{cursor:default;background-color:#ffffff;border:1px solid #ff0000;font-weight:bold;font-size:12px;width:13px;height:13px;color:#369}
  </style>
</head>

<body>
<form   name="ss"   onsubmit="return   false">

  <input   type="input"   name="c"   value="&#8730;"   class="chx"   onclick="this.value=this.value=='&#8730;'?'':'&#8730;';"   readonly>
  </form>

</body>
</html>

That invalid markup (inline-level input as immediate child of form is not allowed in a Strict DTD, and if you insist on ‘XHTML’ you must close the <input> tag).

It’s not a good solution anyway, because it will not work if JavaScript is disabled or unsupported.

This not working without JavaScript would worry me the most as it will simply appear as though it’s broken which you may not think as a huge issue but if I visited a site and something like this didn’t work then I certainly wouldn’t trust the site to store my personal details, credit card information.

There are probably some solutions using external JavaScript which will do what you want it to do but will also leave the form unstyled for users without JavaScript which would be a much better approach as you won’t be excluding any of your visitors.