Эмуляция рамки вокруг select

Казалось бы, простая вещь — изменить цвет рамки (border) элемента select. Но и тут возникают проблемы. Все браузеры нормально реагируют на свойство border, если не считать изменение размера элемента на один пиксель в меньшую сторону, что не так существенно.

Но только не в Opera. Мало того, что браузер сжимает select довольно значительно по ширине и высоте, так ещё и изменяет вид самой стрелочки. В результате мы получаем сразу несколько проблем:
Если на странице используются выпадающий список без рамки и с рамкой одновременно, возникает эффект «развалившегося сайта», когда одни и те же элементы выглядят по-разному.;
Если даже все select на сайте будут иметь border, мы получим ещё более сложную проблему: т.к. Opera сильно изменяет размеры выпадающего списка по сравнению с обычным состоянием, мы не сможем подогнать вёрстку пиксель в пиксель с макетом для всех браузеров. Да, можно использовать хаки, но для Opera их мало, да и с каждой новой версией этого браузера появляются новые и перестают действовать старые..

Теперь рассмотрим подробнее что мы сделали. Для созданной нами обёртки добавляем border нужного цвета. Именно он и будет эмулировать рамку вокруг select. После этого добавляем к блоку display: inline-block для того, чтобы он не растягивался больше ширины select. overflow: hidden нужен для точного обтекания обёртки вокруг выпадающего списка.

Но самое интересное мы пишем для самого select. Сначала добавляем ему display: block для максимизации кроссбраузерности. В силу того, что элемент инлайновый, по умолчанию все браузеры задают ему отступы, причём каждый браузер разные. Добавлением блочности мы избавляемся сразу от этих двух проблем. Ну и заключении присваиваем для select отрицательный однопиксельный отступ со всех сторон. Он «стягивает» на себя обёртку, создавая эффект наложения, который визуально смотрится как рамка самого выпадающего списка.