В настоящее время я работаю над небольшим сайтом, и я использовал эффект теневой тени для различных элементов на сайте. Он работает на всех элементах, где он был применен, как в Chrome, так и в Firefox, кроме select и input. Он отлично подходит для этих типов ввода в Firefox, но не в Chrome. Любые идеи, почему?
Я применил этот эффект, используя box-shadow, -webkit-box-shadow и -moz-box-shadow для поддержки нескольких браузеров.
Здесь обходной путь:
HTML:
<div><input type="text" /></div>
CSS
div {
-webkit-box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
box-shadow: 5px 5px 5px #666;
display:inline-block;
}
Здесь a/решение:
select {-webkit-appearance: none; appearance: none; }
Это позволяет любому теневому CSS применять к элементам SELECT в Chrome, но удаляет любые другие данные, такие как стрелка раскрывающегося списка. Но просто создайте небольшой фон img (используя захват экрана), чтобы восстановить его.
Вы можете обернуть этот CSS в CSS-фильтрах только для Chrome: например.
@media screen and (-webkit-min-device-pixel-ratio:0) {/* older safari and older chrome */
select {-webkit-appearance: none; appearance: none;
}
Если вы используете SELECTS без заданной ширины, добавьте CSS "padding-right" для учета нового значка фона /img. Это отлично сработало для меня.
Это также работает с значками проверки HTML5 и т.д. при объединении значка со стрелкой вниз на одном изображении).
Это дефект в Chrome, и вам следует избегать обходных решений, которые добавляют дополнительный код. Если вы можете дождаться исправления; дождитесь его.
http://code.google.com/p/chromium/issues/detail?id=96192
Дефект был записан и был "назначен" на момент написания этой статьи.
Одна вещь, которую я только что сделал, чтобы получить тонкую, слабую, контурную тень, соответствующую моим другим элементам управления вводом (которые используют box-shadow:0 0 2px #000), такова:
select { border:1px solid rgba(0,0,0,.2); }
В результате:
Не будет работать так удобно для более толстых или смещенных теней, но будет аккуратно для этой цели, и не требует вложения в другие элементы или удаления и восстановления всех остальных стилей элемента.
использовать его работает 100%
-webkit-appearance: none; appearance: none;
если в сафари есть проблема с высотой, добавьте
line-height:18px;