/** * selectFilter --v1.0 * **/ .filter-disabled { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .filter-box { height: 100%; position: relative; } .filter-box select { display: none; } .filter-text { height: 100%; overflow: hidden; position: relative; cursor: pointer; padding: 0 20px; background: #fff; box-sizing: border-box; border: 1px solid #e6e6e6; } .filter-text input { font-size: 14px; } .filter-text .filter-title { width: 100%; border: 0; background-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; cursor: pointer; } .filter-list { display: none; width: 100%; flex-direction: column; max-height: 300px !important; background-color: #fff; font-size: 14px; position: absolute; top: 42px; left: 0; z-index: 99; border: 1px solid #e6e6e6; overflow: auto; } .filter-list li.filter-null a { color: #d2d2d2; } .filter-box ul { height: auto !important; } .filter-box ul li { margin: 0 !important; } .filter-list li a { display: block; height: 100%; padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .filter-list li:hover { background-color: #f2f2f2; } .filter-list li.filter-selected { background-color: #5FB878; } .filter-list li.filter-selected a{ display: block; color: #fff; } .filter-list li.filter-disabled { background-color: #fff; } .filter-list li.filter-disabled a{ display: block; color: #d2d2d2; } .filter-list li.filter-disabled:hover a { cursor: not-allowed!important; background-color: #fff; } .icon { position: absolute; } .icon-filter-arrow { width: 8px; height: 6px; background-repeat: no-repeat; background-image: url(./icon/icon_arrow_down_x2.png); background-size: 100%; right: 20px; top: 50%; transform: translate(0, -50%); transition: all .2s; } .icon-filter-arrow.filter-show { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .filter-list::-webkit-scrollbar { width: 4px; height: 4px; } .filter-list::-webkit-scrollbar-track { background: #fff } .filter-list::-webkit-scrollbar-thumb { background: #CBCBCB; } .item { width: 240px; height: 32px; margin: 100px auto; }