@charset "utf-8"; /* styles for select */ .cusel, .cuselFrameRight, .jScrollPaneDrag, .jScrollArrowUp, .jScrollArrowDown { background: url(/images/themes/main/selects.png) no-repeat; } .cusel { /* общий вид селекта включая стрелку справа */ height: 23px; background-position: left top; display: inline-block; position: relative; cursor: pointer; } .cuselFrameRight { /* левая чсть селект. обыно скругление и левая граница */ position: absolute; z-index: 2; top: 0; right: 0; height: 100%; width: 21px; background-position: right top; } .cuselText { /* контейнер для отображенного текста селект */ height: 17px; padding: 3px 0 0 10px; /* подбираем отступы и высоту для видимого текста в селекте */ cursor: pointer; overflow: hidden; position: relative; z-index: 1; position: absolute; top: 0; left: 0; } * html .cuselText { /* высота блока для текста для ие6 */ height: 19px; } .cusel span { /* оформление оптиона */ display: block; cursor: pointer; white-space: nowrap; padding: 2px 15px 2px 5px; /* паддинг справа - это отступ текста от ползунка */ text-align: left; } .cusel span:hover { /* реакция оптиона на наведение */ background: #3879c7; color: #fff; } .cusel .cuselActive { /* оформление активного оптиона в списке */ background: #3879c7; color: #fff; cursor: default; } /* styles for disabled select */ .classDisCusel, .classDisCusel .cuselFrameRight { background-image: url(/images/themes/main/selects-dis.png); cursor: default; color: #ccc; } .classDisCusel .cuselText { cursor: default; } /* styles for scrollbar */ .cusel-scroll-wrap { /* контейнер для блока с прокруткой */ display: block; visibility: hidden; position: absolute; left: 0; top: 100%; background: #fff; /* фон выпадающего списка */ min-width: 100%; width: auto; } .jScrollPaneContainer { position: relative; overflow: hidden; z-index: 5; border: 1px solid #999; /* границы выпадающего спиcка */ } .jScrollPaneTrack { /* трек для ползунка прокрутки */ height: 100%; width: 7px !important; background: #ccc; position: absolute; top: 0; right: 4px; } .jScrollPaneDrag { /* ползунок */ position: absolute; background-position: -40px -23px; cursor: pointer; width: 15px !important; height: 27px !important; right: -4px; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } .jScrollArrowUp { /* стрелка вверх */ position: absolute; top: 0; right: 2px; width: 26px; height: 12px; cursor: pointer; background-position: -2px -23px; overflow: hidden; } .jScrollArrowDown { /* стрелка вниз */ width: 25px; height: 12px; position: absolute; top: auto; bottom: 0; right: 3px; cursor: pointer; background-position: -21px -23px; overflow: hidden; }