Казалось бы, простая вещь — изменить цвет рамки (border) элемента select. Но и тут возникают проблемы. Все браузеры нормально реагируют на свойство border, если не считать изменение размера элемента на один пиксель в меньшую сторону, что не так существенно.
Но только не в Opera. Мало того, что браузер сжимает select довольно значительно по ширине и высоте, так ещё и изменяет вид самой стрелочки. В результате мы получаем сразу несколько проблем:
Если на странице используются выпадающий список без рамки и с рамкой одновременно, возникает эффект «развалившегося сайта», когда одни и те же элементы выглядят по-разному.;
Если даже все select на сайте будут иметь border, мы получим ещё более сложную проблему: т.к. Opera сильно изменяет размеры выпадающего списка по сравнению с обычным состоянием, мы не сможем подогнать вёрстку пиксель в пиксель с макетом для всех браузеров. Да, можно использовать хаки, но для Opera их мало, да и с каждой новой версией этого браузера появляются новые и перестают действовать старые..
Для решения возникшей проблем существует один лёгкий и простой способ.
Сначала нужно обернуть наш select в div:
А затем прописать в CSS следующую инструкцию:
div {
border:1px solid #f00;
display: inline-block;
overflow: hidden;
}
select {
display: block;
margin: -1px;
}
Теперь рассмотрим подробнее что мы сделали. Для созданной нами обёртки добавляем border нужного цвета. Именно он и будет эмулировать рамку вокруг select. После этого добавляем к блоку display: inline-block для того, чтобы он не растягивался больше ширины select. overflow: hidden нужен для точного обтекания обёртки вокруг выпадающего списка.
Но самое интересное мы пишем для самого select. Сначала добавляем ему display: block для максимизации кроссбраузерности. В силу того, что элемент инлайновый, по умолчанию все браузеры задают ему отступы, причём каждый браузер разные. Добавлением блочности мы избавляемся сразу от этих двух проблем. Ну и заключении присваиваем для select отрицательный однопиксельный отступ со всех сторон. Он «стягивает» на себя обёртку, создавая эффект наложения, который визуально смотрится как рамка самого выпадающего списка.
Ваша оценка:
Но только не в Opera. Мало того, что браузер сжимает select довольно значительно по ширине и высоте, так ещё и изменяет вид самой стрелочки. В результате мы получаем сразу несколько проблем:
Если на странице используются выпадающий список без рамки и с рамкой одновременно, возникает эффект «развалившегося сайта», когда одни и те же элементы выглядят по-разному.;
Если даже все select на сайте будут иметь border, мы получим ещё более сложную проблему: т.к. Opera сильно изменяет размеры выпадающего списка по сравнению с обычным состоянием, мы не сможем подогнать вёрстку пиксель в пиксель с макетом для всех браузеров. Да, можно использовать хаки, но для Opera их мало, да и с каждой новой версией этого браузера появляются новые и перестают действовать старые..
Для решения возникшей проблем существует один лёгкий и простой способ.
Сначала нужно обернуть наш select в div:
Код
<div><select><option>lorem ipsum</option></select></div>
А затем прописать в CSS следующую инструкцию:
Код
div {
border:1px solid #f00;
display: inline-block;
overflow: hidden;
}
select {
display: block;
margin: -1px;
}
Теперь рассмотрим подробнее что мы сделали. Для созданной нами обёртки добавляем border нужного цвета. Именно он и будет эмулировать рамку вокруг select. После этого добавляем к блоку display: inline-block для того, чтобы он не растягивался больше ширины select. overflow: hidden нужен для точного обтекания обёртки вокруг выпадающего списка.
Но самое интересное мы пишем для самого select. Сначала добавляем ему display: block для максимизации кроссбраузерности. В силу того, что элемент инлайновый, по умолчанию все браузеры задают ему отступы, причём каждый браузер разные. Добавлением блочности мы избавляемся сразу от этих двух проблем. Ну и заключении присваиваем для select отрицательный однопиксельный отступ со всех сторон. Он «стягивает» на себя обёртку, создавая эффект наложения, который визуально смотрится как рамка самого выпадающего списка.
Ваша оценка:
Другие новости |
Поделиться ссылкой
|
Комментарии |
Всего комментариев: 0 | |