.select-label{ position:relative; display:inline-block; cursor:pointer; font-family:arial; margin-right:7px } .select-label[disabled]{ opacity:0.6; cursor:default } .select-label[disabled] .select-label-span{ cursor:default; background:none } .select-label[disabled] .select-label-span:focus{ border-color:#dbdbdc } .select-label *{ list-style:none } .select-label *:focus{ outline:none } .select-label .mobile-header{ background:#e7e7e7; left:0; margin-top:-48px; opacity:0; padding:11px 15px; position:fixed; right:0; text-align:right; top:55%; visibility:hidden; transition:opacity 0.2s,visibility 0.2s } .select-label .mobile-header .select-close-button{ background:url(../img/icon-close.png) no-repeat center; float:right; height:28px; overflow:hidden; text-indent:100%; white-space:nowrap; width:25px } .select-label.mobile{ position:static } .select-label.mobile.show .mobile-header{ opacity:1; visibility:visible } .select-label.mobile ul{ bottom:0 !important; max-height:100%; top:55% !important; position:fixed; left:0 !important; right:0 !important } .select-label.mobile ul li,.select-label.mobile ul li:first-child{ font-size:25px; padding:15px 25px; position:relative } .select-label.mobile[multiple] li:before{ content:""; background:#fff; border:1px solid #d1d1d1; height:29px; width:29px; position:absolute; right:25px; top:15px } .select-label.mobile[multiple] li:after{ content:""; background:url(../img/icon-checked.png) no-repeat center; height:29px; width:29px; opacity:0; position:absolute; right:25px; top:15px; z-index:9999999; transition:opacity 0.3s } .select-label.mobile[multiple] li.selected:after{ opacity:1 } .select-label.show ul{ opacity:1; visibility:visible } .select-label.show-top ul{ bottom:35px } .select-label ul{ position:fixed; border:1px solid #dbdbdc; cursor:pointer; opacity:0; padding:0; margin:0; margin-top:-3px; visibility:hidden; left:0; right:0; background:#fff; max-height:330px; overflow-y:scroll; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; z-index:9999999; transition:opacity 0.2s,visibility 0.2s } .select-label ul li{ display:block; list-style:none; overflow:hidden; padding:10px 15px; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:color 0.2s,background 0.2s } .select-label ul li.default{ color:#B8B7B7 } .select-label ul li:first-child{ padding:10px 15px } .select-label ul li strong{ font-weight:normal; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } .select-label ul li i{ font-style:normal; background:#ff0 } .select-label ul li:hover,.select-label ul li.hovered{ background:#DBDBDB } .select-label ul li.selected{ color:#fff; background:#ccc } .select-label ul li.selected.hovered{ background:silver } .select-label-span{ background:#fff url('../img/selectbox-arrow.png') no-repeat right 10px center; border:1px solid #dbdbdc; font-size:0.875em; color:#000; display:inline-block; cursor:pointer; font-weight:lighter; padding:9px 10px 8px; width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } .select-label-span.error_field{ background:#ffd9d9 url('../img/selectbox-arrow.png') no-repeat right 10px center; border: 1px solid #ff9b9b; } .select-label-span.selected i{ font-style:normal; background:#3297FD; color:#fff } .select-label-span.default{ color:#B8B7B7 } .select-label-span:focus{ border-color:#587b87 } .select-label[multiple] span { background:#FFF url('../img/multiple-selectbox-arrow.png') no-repeat right 10px center; } .select-label[multiple] span.error_field { background:#ffd9d9 url('../img/multiple-selectbox-arrow.png') no-repeat right 10px center; border: 1px solid #ff9b9b; } @media screen and (min-width: 1024px) { body.sw-admin .select-label.mobile ul { left: 0 !important; } body.sw-admin.toggle-left-panel .select-label.mobile ul { left: 275px !important; } }