Firefox 5 стайлинг чекбокс странный фон - PullRequest
Новая
       44

Firefox 5 стайлинг чекбокс странный фон

1 голос
/ 28 июня 2011

Код ниже воспроизводит поведение, с которым я столкнулся сегодня, довольно странно ( происходит только в Windows ).При наведении курсора Firefox окрашивает checkbox черной рамкой.Как видно на изображении.

the black border should not exist

Все остальные браузеры (Chrome, Safari и все IE) не имеют подобного эффекта.

Есть идеи, как я могу (сохраняя атрибут height) заставить Firefox вести себя? 

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

1 Ответ

0 голосов
/ 25 июля 2011

Я испытал такое же поведение в Firefox 5 на Windows XP. Единственный способ, которым я смог устранить черный фон, установив значение CSS Height на auto и используя margin-top, чтобы вместо этого правильно установить флажок.

Пример:

Примечание. В этом примере #c-box является элементом input type="checkbox.

Вместо 

#c-box {
    height: 20px;
}

Используйте 

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

Я знаю, что вы упомянули, что хотите сохранить свойство height, но это решение помогло мне, не нарушая мой макет.

Надеюсь, это поможет! Я впервые отвечаю на вопросы здесь, после того как нахожу бесчисленные ответы на свои проблемы. :)

...