У меня есть поисковый запрос с авто-подсказкой, который выдает div под ним с несколькими предложениями строки поиска (например, google). Возможно ли иметь тень в окне автоматического предложения с помощью CSS или мне понадобится script? Я попробовал фоновое изображение, но количество предложений может варьироваться от 1 до 10 или 15.
Я бы предпочел что-то, что работает в IE6 + и FF2 +, если это возможно. Спасибо!
Это работает для меня во всех моих браузерах:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
то просто укажите любой div теневой класс, не требуется jQuery.
CSS3 имеет свойство box-shadow. В настоящий момент необходимы префиксы поставщиков для максимальной совместимости с браузером.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
Существует генератор, доступный в css3please.
Наиболее распространенным способом сделать это, вероятно, будет создание второго div под вашим полем с автоматическим предложением такого же размера, как и сам ящик, подталкивающий несколько пикселей вниз и вправо. Вы можете использовать JS для его создания и размещения, что не должно быть ужасно трудным, если вы используете довольно современную инфраструктуру.
вы можете попробовать это. Кажется, это довольно легко и работает на IE6 и Moz по крайней мере.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
Общий синтаксис: border- [postion]: [border-style] [border-width] [border-color] | наследовать
Список доступных [border-style] s:
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
Вы можете попробовать использовать тени для PNG. IE6 не поддерживает его, однако он будет ухудшаться красиво.
http://www.positioniseverything.net/articles/dropshadows.html