Использование теневого окна на выбранных входах в Chrome

В настоящее время я работаю над небольшим сайтом, и я использовал эффект теневой тени для различных элементов на сайте. Он работает на всех элементах, где он был применен, как в Chrome, так и в Firefox, кроме select и input. Он отлично подходит для этих типов ввода в Firefox, но не в Chrome. Любые идеи, почему?

Я применил этот эффект, используя box-shadow, -webkit-box-shadow и -moz-box-shadow для поддержки нескольких браузеров.

Ответы

Ответ 1

Здесь обходной путь:

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;
}

Демо: http://jsfiddle.net/AlienWebguy/UD2QP/

Ответ 2

Здесь 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 и т.д. при объединении значка со стрелкой вниз на одном изображении).

Ответ 3

Это дефект в Chrome, и вам следует избегать обходных решений, которые добавляют дополнительный код. Если вы можете дождаться исправления; дождитесь его.

http://code.google.com/p/chromium/issues/detail?id=96192

Дефект был записан и был "назначен" на момент написания этой статьи.

Ответ 4

Одна вещь, которую я только что сделал, чтобы получить тонкую, слабую, контурную тень, соответствующую моим другим элементам управления вводом (которые используют box-shadow:0 0 2px #000), такова:

select { border:1px solid rgba(0,0,0,.2); }

В результате:

Не будет работать так удобно для более толстых или смещенных теней, но будет аккуратно для этой цели, и не требует вложения в другие элементы или удаления и восстановления всех остальных стилей элемента.

Ответ 5

использовать его работает 100%

-webkit-appearance: none; appearance: none;

если в сафари есть проблема с высотой, добавьте

 line-height:18px;