Почему текстовые вводы меняют свои атрибуты границ, когда применяется цвет фона?

Question

Вот пример, который я смотрю в FF 3.6, а вход с background: transparent имеет границу, отличную от нетронутой.

http://jsfiddle.net/Pa2Kd/

Answer 1

Моя гипотеза состоит в том, что, когда стиль не изменяется, используется собственный элемент управления Win32 с его настройками по умолчанию (более или менее). Но когда вы изменяете стиль, используется пользовательский элемент управления или более настраиваемая версия элемента управления Win32.

Я помню похожие вещи с тех пор, как я был мальчиком и играл с полосами прокрутки в Internet Explorer 4: они выглядят нормально, если вы не связываетесь с ними (тема ОС), но если вы это делаете, они получают "плоский ». Другое дело, кнопки: кнопки Windows Aero выглядят так, как они делают - менять особо нечего. Если вы хотите изменить цвет кнопки, вам нужно «отключить» тематику Aero для кнопки, и вы получите 3D или плоскую кнопку в старом стиле, в зависимости от вашего браузера.

Просто некоторые мысли. Я могу быть совершенно неправ, потому что веб-дизайн не является моей основной областью деятельности.

Answer 2

Как и другие, это связано со стилем ОС по умолчанию, который очищается, как только вы добавляете какие-либо свойства.Вы можете имитировать стиль по умолчанию с помощью CSS, хотя, вероятно, было бы излишним делать обнаружение ОС и применять другие правила CSS соответственно.Вместо этого вы можете выбрать стиль ОС, который вам нравится, и применить его по умолчанию для всех текстовых вводов.Стиль Mac OSX может быть разумно воспроизведен с помощью следующего CSS:

#background {
    background: transparent;
    border:1px solid #ddd;
    padding:2px;
    -webkit-box-shadow:inset 0px 1px 2px #333;
    -moz-box-shadow:inset 0px 1px 2px #333;
    box-shadow:inset 0px 1px 2px #333;
}
​

Сезон по вкусу.

Answer 3

Я второй, что говорит Андреас.

Я не знаю, почему именно это не так. Из своего опыта я делаю вывод, что при изменении одного из визуальных атрибутов border background-color браузер переключается из режима «Стиль рендеринга ОС» в режим «Создание правил рендеринга самостоятельно». К сожалению, насколько мне известно, нет никакого CSS-способа вернуться к стилю рендеринга ОС.

Единственный способ справиться с этим - определить согласованный набор правил для элементов управления - это позор, потому что вполне логично оставить эти правила стилей для ОС пользователя.