@-webkit-keyframes iui-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes iui-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-keyframes iui-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-o-keyframes iui-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes iui-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes iui-fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes iui-fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-ms-keyframes iui-fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes iui-fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes iui-fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } .dropdown-multiple, .dropdown-multiple-label, .dropdown-single { position: relative } .dropdown-multiple-label.active .dropdown-main, .dropdown-multiple.active .dropdown-main, .dropdown-single.active .dropdown-main { display: block; -webkit-animation: iui-fadeIn .2s ease-in forwards; -moz-animation: iui-fadeIn .2s ease-in forwards; -ms-animation: iui-fadeIn .2s ease-in forwards; -o-animation: iui-fadeIn .2s ease-in forwards; animation: iui-fadeIn .2s ease-in forwards } .dropdown-multiple-label.active .dropdown-display-label:after, .dropdown-multiple-label.active .dropdown-display:after, .dropdown-multiple.active .dropdown-display-label:after, .dropdown-multiple.active .dropdown-display:after, .dropdown-single.active .dropdown-display-label:after, .dropdown-single.active .dropdown-display:after { border-top: none; border-bottom: 10px solid #999; border-left: 5px solid transparent; border-right: 5px solid transparent } .dropdown-multiple-label.active .dropdown-display, .dropdown-multiple-label.active .dropdown-display-label, .dropdown-multiple.active .dropdown-display, .dropdown-multiple.active .dropdown-display-label, .dropdown-single.active .dropdown-display, .dropdown-single.active .dropdown-display-label { border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .dropdown-display, .dropdown-display-label { position: relative; display: block; margin-bottom: 0; font-size: 14px; line-height: 1.42857143; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; border: 1px solid #ccc; border-radius: 4px; color: #333; background-color: #fff } .dropdown-display-label:after, .dropdown-display:after { content: ''; position: absolute; border-top: 10px solid #999; border-left: 5px solid transparent; border-right: 5px solid transparent; top: 12px; right: 8px } .dropdown-clear-all { background-color: #fff; border: none; font-size: 22px; z-index: 999; color: #999; position: absolute; right: 2px; top: 2px; display: none; width: 25px; height: 30px; text-align: center; line-height: 30px; } .dropdown-clear-all:focus { outline: 0 } .dropdown-clear-all:hover { color: #ccc; text-decoration: none; } .dropdown-display { white-space: nowrap; padding: 6px 20px 6px 12px } .dropdown-multiple:hover .dropdown-clear-all, .dropdown-single:hover .dropdown-clear-all { display: block } .dropdown-display .dropdown-chose-list { display: inline-block; vertical-align: middle; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .dropdown-display .dropdown-chose-list span:before { content: ',' } .dropdown-display .dropdown-chose-list span:first-child:before { content: '' } .dropdown-display .placeholder { display: none } .dropdown-display .placeholder:first-child { position: absolute; height: 100%; width: 100%; top: 0; left: 0; color: #999; display: block; text-indent: 10px; font-size: 13px; line-height: 32px } .dropdown-display input { border: 0; outline: 0 } .dropdown-display-label { cursor: text; padding: 6px 25px 5px 0 } .dropdown-display-label .dropdown-search { display: inline-block } .dropdown-display-label input, .dropdown-display-label input:focus { border: none; outline: 0 } .dropdown-display-label .dropdown-chose-list { display: inline-block; padding: 0 5px } .dropdown-display-label .dropdown-chose-list .placeholder { display: none } .dropdown-display-label .dropdown-selected { position: relative; margin: 0 5px 5px 0; padding: 0 20px 0 5px; border: 1px solid #aaa; max-width: 100%; border-radius: 3px; background-repeat: repeat-x; color: #333; cursor: default; display: inline-block } .dropdown-display-label .dropdown-selected .del { -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; float: right; line-height: 1; color: #999; position: absolute; right: 3px; top: 0 } .dropdown-display-label .dropdown-selected .del:after { content: '\D7'; font-size: 16px } .dropdown-main { position: absolute; top: 100%; left: 0; z-index: 1010; width: 100%; color: #444; box-sizing: border-box; background-color: #fff; border: 1px solid #ccc; border-radius: 0 0 4px 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); margin-top: -1px; border-top: 0; padding: 4px 7px; display: none } .dropdown-main ul { overflow-x: hidden; overflow-y: auto; max-height: 240px; margin: 0; padding: 0 } .dropdown-main input { margin-top: 0; display: block; box-sizing: border-box; height: 30px; border: 1px solid #ccc; width: 100%; text-indent: 5px; border-radius: 3px } .dropdown-main .dropdown-search { display: block; padding: 5px 0 } .dropdown-group { font-weight: 700 } .dropdown-group, .dropdown-option { margin: 0; padding-left: 12px; list-style: none; line-height: 26px; word-wrap: break-word } .dropdown-option { cursor: pointer } .dropdown-option:focus, .dropdown-option:hover { background-color: #efefef; outline: 0 } .dropdown-option[disabled] { color: #ddd; background-color: #ddd; cursor: not-allowed; text-decoration: line-through } .dropdown-option.dropdown-chose{ background-color: #ddd; border-bottom:1px solid #fff; } .dropdown-option.dropdown-chose:after { content: ''; float: right; width: 10px; height: 10px; background: #4AB1E9; border-radius: 100%; margin: 8px 5px 0 0 } .dropdown-maxItem-alert { position: absolute; top: 0; left: 0; background-color: #e4e3e2; width: 100%; height: 39px; line-height: 39px; padding: 0 5px; border-radius: 5px; color: #999; -webkit-animation: iui-fadeIn .2s ease-in forwards; -moz-animation: iui-fadeIn .2s ease-in forwards; -ms-animation: iui-fadeIn .2s ease-in forwards; -o-animation: iui-fadeIn .2s ease-in forwards; animation: iui-fadeIn .2s ease-in forwards }