adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
2 lines (1 loc) • 10.4 kB
CSS
.adui-select{position:relative;display:inline-block;min-width:77px;height:36px;transform:translate3d(0, 0, 0)}.adui-select-allow-clear:not(.adui-select-disabled):hover .adui-select-clear{opacity:1;visibility:visible}.adui-select-value_is_empty_string .adui-select-selection-item{color:var(--gray-700)}.adui-select-value_is_empty_string .adui-select-clear{display:none}.adui-select-selector{position:relative;display:flex;align-items:center;height:100%;color:var(--gray-900);background-color:#fff;border-radius:4px;box-shadow:0 3px 3px 0 rgba(0,0,0,.03),0 0 0 1px var(--gray-400);outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;transition:color var(--adui-motion-duration-base) var(--adui-motion-ease-base),background-color var(--adui-motion-duration-base) var(--adui-motion-ease-base),background-image var(--adui-motion-duration-base) var(--adui-motion-ease-base),box-shadow var(--adui-motion-duration-base) var(--adui-motion-ease-base)}.adui-select-selector:hover{background-color:var(--gray-100);box-shadow:0 3px 3px 0 rgba(0,0,0,.03),0 0 0 1px var(--gray-500)}.adui-select-selector:active{background-color:var(--gray-200);box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.04),0 0 0 1px var(--gray-500)}.adui-select-selector::before{content:" ";opacity:0;width:0;line-height:0}.adui-select-selection-placeholder{flex:1;margin-left:11px;margin-right:25px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--transparent-gray-700)}.adui-select-placeholder-text{position:fixed;top:0;right:25px;bottom:0;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adui-select-selection-search{position:absolute;top:0;right:25px;bottom:0;left:11px}.adui-select-selection-search input{display:none;width:100%;height:100%;background-color:rgba(0,0,0,0);border:none;outline:none;cursor:pointer}.adui-select-item-option{flex:none;position:relative;padding-left:12px;padding-right:12px;font-size:var(--font-size-small);line-height:32px;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis;transition:background-color var(--adui-motion-duration-base) var(--adui-motion-ease-base)}.adui-select-item-option-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adui-select-item-option:hover{background-color:var(--gray-200)}.adui-select-item-option:active{background-color:var(--gray-300)}.adui-select-item-option-active{background-color:var(--gray-200)}.adui-select-item-option-disabled{color:var(--gray-700);cursor:not-allowed}.adui-select-item-option-disabled:hover{background-color:#fff;cursor:not-allowed}.adui-select-item-option-group-list{padding:0;list-style:none}.adui-select-item-group{color:var(--transparent-gray-700)}.adui-select-disabled .adui-select-selection-search input{cursor:not-allowed}.adui-select-disabled .adui-select-selector{color:var(--gray-700);background-color:rgba(0,0,0,.03);box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:not-allowed}.adui-select-disabled .adui-select-selector:hover,.adui-select-disabled .adui-select-selector:active{background-color:rgba(0,0,0,.03);box-shadow:0 0 0 1px rgba(0,0,0,.08)}.adui-select-disabled .adui-select-arrow{cursor:not-allowed}.adui-select-disabled .adui-select-arrow svg{fill:var(--gray-700)}.adui-select-light .adui-select-placeholder-text{color:var(--gray-800);font-weight:500}.adui-select-light .adui-select-selector{color:var(--gray-800);font-weight:500;background-color:rgba(0,0,0,0);box-shadow:none}.adui-select-light .adui-select-selector::after{opacity:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--gray-800);border-radius:4px;transform:scale(0.94);transition:all var(--adui-motion-ease-base) var(--motion-duration-base)}.adui-select-light .adui-select-selector:hover{color:var(--gray-900)}.adui-select-light .adui-select-selector:hover::after{opacity:.1;transform:scale(1)}.adui-select-light .adui-select-selector:active::after{opacity:.2;transform:scale(1)}.adui-select-light.adui-select-disabled .adui-select-selector{color:var(--gray-700);background-color:rgba(0,0,0,0);box-shadow:none}.adui-select-light.adui-select-disabled .adui-select-selector svg{fill:var(--gray-700)}.adui-select-light.adui-select-disabled .adui-select-selector:hover::after,.adui-select-light.adui-select-disabled .adui-select-selector:active::after{opacity:0}.adui-select-selection-item{position:relative;z-index:1;max-width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adui-select-selection__placeholder,.adui-select-selection-selected-value{margin-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.adui-select-arrow,.adui-select-clear{position:absolute;top:50%;margin-top:-9px;right:6px;line-height:0}.adui-select-arrow svg,.adui-select-clear svg{display:block}.adui-select-arrow{pointer-events:none}.adui-select-clear{cursor:pointer;opacity:0;visibility:hidden}.adui-select-dropdown{position:absolute;top:-9999px;left:-9999px;z-index:var(--z-index-dropdown);background-color:#fff;border-radius:6px;overflow:hidden;box-shadow:var(--box-shadow-elevation-2)}.adui-select-dropdown [role*=listbox]+div{padding:4px 0}.adui-select-dropdown [role*=listbox]+div::-webkit-scrollbar{width:14px;height:14px}.adui-select-dropdown [role*=listbox]+div::-webkit-scrollbar-thumb{min-width:14px;min-height:14px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:4px solid rgba(0,0,0,0);border-radius:14px}.adui-select-dropdown [role*=listbox]+div::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4)}.adui-select-dropdown [role*=listbox]+div::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.65)}.adui-select-dropdown .rc-virtual-list-scrollbar{width:14px }.adui-select-dropdown .rc-virtual-list-scrollbar-thumb{left:6px ;width:6px ;background-color:rgba(0,0,0,.15) }.adui-select-dropdown .rc-virtual-list-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4) }.adui-select-dropdown-large .adui-select-item{padding-left:16px;line-height:40px}.adui-select-dropdown-large .adui-select-item-group{font-size:var(--font-size-medium)}.adui-select-dropdown-large .adui-select-item-option{font-size:var(--font-size-large)}.adui-select-dropdown-medium .adui-select-item{padding-left:16px;line-height:36px}.adui-select-dropdown-medium .adui-select-item-group{font-size:var(--font-size-mini)}.adui-select-dropdown-medium .adui-select-item-option{font-size:var(--font-size-medium)}.adui-select-dropdown-small .adui-select-item,.adui-select-dropdown-mini .adui-select-item{padding-left:12px;line-height:32px}.adui-select-dropdown-small .adui-select-item-group,.adui-select-dropdown-mini .adui-select-item-group{font-size:var(--font-size-mini)}.adui-select-dropdown-small .adui-select-item-option,.adui-select-dropdown-mini .adui-select-item-option{font-size:var(--font-size-medium)}.adui-select-dropdown-searchable{max-height:initial}.adui-select-dropdown-searchable .adui-select-dropdown{max-height:250px}.adui-select-dropdown-hidden{display:none}.adui-select-item-empty{position:relative;padding:4px 16px;font-size:var(--font-size-small);line-height:32px;color:var(--gray-700);white-space:nowrap;cursor:not-allowed;overflow:hidden;text-overflow:ellipsis;transition:background-color var(--adui-motion-duration-base) var(--adui-motion-ease-base)}.adui-select-open.adui-select-light .adui-select-selector::after{opacity:.1;transform:scale(1)}.adui-select-open.adui-select-light .adui-select-selector:active::after{opacity:.2;transform:scale(1)}.adui-select-large{height:42px}.adui-select-large .adui-select-placeholder-text,.adui-select-large .adui-select-selector{font-size:var(--font-size-large)}.adui-select-large .adui-select-placeholder-text{left:16px}.adui-select-large .adui-select-placeholder-text,.adui-select-large .adui-select-selection-item{line-height:42px}.adui-select-large .adui-select-selection-item,.adui-select-large .adui-select-selection-placeholder{margin-left:16px;margin-right:32px}.adui-select-medium{height:36px}.adui-select-medium .adui-select-placeholder-text,.adui-select-medium .adui-select-selector{font-size:var(--font-size-medium)}.adui-select-medium .adui-select-placeholder-text{left:12px}.adui-select-medium .adui-select-placeholder-text,.adui-select-medium .adui-select-selection-item{line-height:36px}.adui-select-medium .adui-select-selection-item,.adui-select-medium .adui-select-selection-placeholder{margin-left:12px;margin-right:28px}.adui-select-small{height:30px}.adui-select-small .adui-select-placeholder-text,.adui-select-small .adui-select-selector{font-size:var(--font-size-small)}.adui-select-small .adui-select-placeholder-text{left:10px}.adui-select-small .adui-select-placeholder-text,.adui-select-small .adui-select-selection-item{line-height:30px}.adui-select-small .adui-select-selection-item,.adui-select-small .adui-select-selection-placeholder{margin-left:10px;margin-right:26px}.adui-select-mini{height:26px}.adui-select-mini .adui-select-placeholder-text,.adui-select-mini .adui-select-selector{font-size:var(--font-size-mini)}.adui-select-mini .adui-select-placeholder-text{left:8px}.adui-select-mini .adui-select-placeholder-text,.adui-select-mini .adui-select-selection-item{line-height:26px}.adui-select-mini .adui-select-selection-item,.adui-select-mini .adui-select-selection-placeholder{margin-left:8px;margin-right:24px}.adui-select-select_placeholderShow .adui-select-selection__placeholder{display:block }.adui-select-search{position:relative;height:44px;box-shadow:0 1px 0 0 var(--gray-300)}.adui-select-search .adui-select-icon{position:absolute;z-index:0;top:50%;left:12px;margin-top:-9px;fill:var(--gray-700);transition:fill var(--motion-duration-base) var(--adui-motion-ease-base)}.adui-select-search input{position:relative;z-index:1;padding:10px 12px 10px 34px;width:100%;font-size:14px;line-height:24px;background-color:rgba(0,0,0,0);border:none;outline:none}.adui-select-search input::-moz-placeholder{color:var(--gray-700);opacity:1}.adui-select-search input:-ms-input-placeholder{color:var(--gray-700)}.adui-select-search input::-webkit-input-placeholder{color:var(--gray-700)}.adui-select-search input:hover+.adui-select-icon{fill:var(--gray-800)}.adui-select-search input:focus+.adui-select-icon{fill:var(--gray-900)}