1

The code bellow reproduces a behavior I've come across today that's pretty strange (only happens on windows). On hover, Firefox colors the checkbox with a black border. As seen on the image.

the black border should not exist

All other browsers (chrome, safari and all IE's) don't experience similar effect.

Any idea on how I can (keeping the height attribute) make Firefox behave?

<!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" />
    <style type="text/css">
        #c-box {
            height: 20px;
        }

    </style>
</head>
<body>
        <input id="c-box" type="checkbox">
        <label for="c-box">this is a checkbox</label>
</body>
</html>
Frankie
  • 24,627
  • 10
  • 79
  • 121

1 Answers1

0

I experienced the same behavior in Firefox 5 on Windows XP. The only way I was able to eliminate the black background by setting the CSS Height value to auto, and using margin-top to get the checkbox aligned properly instead.

Example:

Note: In this example, #c-box is an input type="checkbox element.

Instead of

#c-box {
    height: 20px;
}

Use

#c-box {
    margin-top: 5px; /* Test to see which margin value matches the look you desire */
    height: auto;
}

I know you mentioned that you wish to keep the height property, but this solution worked for me without breaking my layout.

Hope that helps! This is my first time actually answering a questions here, after finding countless answers to my own problems. :)

Rtrott
  • 1
  • 1