/** * selectFilter --v1.0 * **/ * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } .filter-disabled { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .filter-box { position: relative; } .filter-box select { display: none; } .filter-text { height: 100%; overflow: hidden; position: relative; cursor: pointer; padding: 0 30px 0 10px; background: #fff; border: 1px solid #e6e6e6; } .filter-text input { font-size: 14px; } .filter-text .filter-title { width: 100%; height: 36px; line-height: 36px; border: 0; background-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; cursor: pointer; } .filter-list { display: none; width: 100%; max-height: 300px; 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-list li a { display: block; 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: #7e7e7e; } .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 { position: absolute; right: 10px; top: 8px; } .icon-filter-arrow.filter-show { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); position: absolute; } .filter-list::-webkit-scrollbar { width: 4px; height: 4px; } .filter-list::-webkit-scrollbar-track { background: #fff } .filter-list::-webkit-scrollbar-thumb { background: #CBCBCB; } .ic-jiantou-xia-cu-l{ color:#303133; } .filter-box, .filter-box2{ border-radius: 4px; }