UNPKG

vexip-ui

Version:

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

1 lines 22.2 kB
.vxp-input-vars{--vxp-input-bg-color:var(--vxp-fill-color-base);--vxp-input-bg-color-disabled:var(--vxp-fill-color-humble);--vxp-input-b-color:var(--vxp-border-color-base);--vxp-input-b-color-hover:var(--vxp-color-primary-light-1);--vxp-input-b-color-focus:var(--vxp-input-b-color-hover);--vxp-input-s-color-focus:var(--vxp-color-primary-opacity-6);--vxp-input-placeholder-color:var(--vxp-content-color-placeholder);--vxp-input-control-color:var(--vxp-content-color-base);--vxp-input-control-color-disabled:var(--vxp-content-color-disabled);--vxp-input-icon-color:var(--vxp-content-color-secondary);--vxp-input-icon-color-hover:var(--vxp-color-primary-base);--vxp-input-icon-color-disabled:var(--vxp-input-control-color-disabled);--vxp-input-before-bg-color:var(--vxp-fill-color-background);--vxp-input-after-bg-color:var(--vxp-fill-color-background);--vxp-input-line-height:var(--vxp-line-height-base);--vxp-input-border:var(--vxp-border-shape) var(--vxp-input-b-color);--vxp-input-radius:var(--vxp-radius-base);--vxp-input-count-color:var(--vxp-content-color-secondary);--vxp-input-count-color-disabled:var(--vxp-input-control-color-disabled);--vxp-input-count-font-size:var(--vxp-font-size-secondary);--vxp-input-count-line-height:var(--vxp-line-height-secondary);--vxp-input-height:32px;--vxp-input-v-padding:4px;--vxp-input-h-padding:8px;--vxp-input-padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);--vxp-input-prefix-width:32px;--vxp-input-suffix-width:32px}.vxp-input-wrapper{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;background-color:var(--vxp-input-bg-color);border-radius:var(--vxp-input-radius)}.vxp-input-wrapper,.vxp-input-wrapper *,.vxp-input-wrapper ::after,.vxp-input-wrapper ::before{box-sizing:border-box}.vxp-input-wrapper--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-input{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base)}.vxp-input,.vxp-input *,.vxp-input ::after,.vxp-input ::before{box-sizing:border-box}.vxp-input--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-input{position:relative;display:inline-flex;align-items:center;width:100%;height:var(--vxp-input-height);padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);cursor:text;background-color:var(--vxp-input-bg-color);border:var(--vxp-border-shape) var(--vxp-input-b-color);border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-input:hover{border-color:var(--vxp-input-b-color-hover)}.vxp-input--focused,.vxp-input:focus,.vxp-input:focus-within{z-index:2;border-color:var(--vxp-input-b-color-focus);box-shadow:var(--vxp-shadow-focus) var(--vxp-input-s-color-focus)}.vxp-input--small{--vxp-input-height:24px;--vxp-input-v-padding:1px}.vxp-input--large{--vxp-input-height:40px;--vxp-input-v-padding:7px}.vxp-input.vxp-input--success{--vxp-input-b-color:var(--vxp-color-success-light-1);--vxp-input-b-color-hover:var(--vxp-color-success-light-1);--vxp-input-s-color-focus:var(--vxp-color-success-opacity-6)}.vxp-input.vxp-input--error{--vxp-input-b-color:var(--vxp-color-error-light-1);--vxp-input-b-color-hover:var(--vxp-color-error-light-1);--vxp-input-s-color-focus:var(--vxp-color-error-opacity-6)}.vxp-input.vxp-input--warning{--vxp-input-b-color:var(--vxp-color-warning-light-1);--vxp-input-b-color-hover:var(--vxp-color-warning-light-1);--vxp-input-s-color-focus:var(--vxp-color-warning-opacity-6)}.vxp-input--readonly{cursor:auto}.vxp-input--transparent{background-color:transparent}.vxp-input--transparent,.vxp-input--transparent--focused,.vxp-input--transparent:focus,.vxp-input--transparent:focus-within,.vxp-input--transparent:hover{border-color:transparent;box-shadow:unset}.vxp-input--disabled{cursor:not-allowed;background-color:var(--vxp-input-bg-color-disabled)}.vxp-input--disabled,.vxp-input--disabled:focus,.vxp-input--disabled:focus-within,.vxp-input--disabled:hover{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-input--disabled .vxp-input__control,.vxp-input--disabled .vxp-input__icon,.vxp-input--disabled .vxp-select__control,.vxp-input--disabled .vxp-select__icon{color:var(--vxp-input-control-color-disabled);pointer-events:none;cursor:not-allowed}.vxp-input--disabled.vxp-input--focused{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-input__control{flex:1 0 0;min-width:0;height:100%;padding:0;font-size:inherit;line-height:var(--vxp-input-line-height);color:var(--vxp-input-control-color);background-color:transparent;border:0;border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-color)}.vxp-input__control:disabled{cursor:not-allowed}.vxp-input__control::-moz-placeholder{color:var(--vxp-input-placeholder-color)}.vxp-input__control::placeholder{color:var(--vxp-input-placeholder-color)}.vxp-input__control::-ms-clear,.vxp-input__control::-ms-reveal{display:none}.vxp-input--readonly .vxp-input__control{cursor:auto}.vxp-input__icon{display:flex;align-items:center;justify-content:center;height:100%;color:var(--vxp-input-icon-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-input__icon--placeholder{min-width:14px;min-height:1px;margin-inline-start:4px;visibility:hidden;opacity:0}.vxp-input__prefix{margin-inline-end:4px}.vxp-input__suffix{margin-inline-start:4px;transition:var(--vxp-transition-opacity)}.vxp-input__clear{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0}.vxp-input__clear,.vxp-input__loading{position:absolute;inset-inline-end:var(--vxp-input-h-padding);min-width:14px;margin-inline-start:4px;cursor:pointer}.vxp-input__loading{pointer-events:none}.vxp-input-wrapper .vxp-input{flex:1 0 0;width:auto;min-width:0;background-color:transparent;border-radius:0}.vxp-input-wrapper--before-only .vxp-input{border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input-wrapper--after-only .vxp-input{border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input--before{z-index:1;border-inline-start-color:transparent}.vxp-input--after{z-index:1;border-inline-end-color:transparent}.vxp-input__suffix-wrapper{position:relative;display:flex;align-items:center}.vxp-input__clear,.vxp-input__loading{inset-inline-end:0}.vxp-input__password{margin-inline-start:4px;cursor:pointer}.vxp-input__count{margin:0 4px;font-size:var(--vxp-input-count-font-size);line-height:var(--vxp-input-count-line-height);color:var(--vxp-input-count-color);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:var(--vxp-transition-color)}.vxp-input--disabled .vxp-input__count{color:var(--vxp-input-count-color-disabled)}.vxp-input__after,.vxp-input__before{position:relative;display:flex;align-items:center;height:calc(var(--vxp-input-height));padding:0 var(--vxp-input-h-padding);border:var(--vxp-input-border)}.vxp-input__after--action,.vxp-input__before--action{padding:0;border:0}.vxp-input__before{background-color:var(--vxp-input-before-bg-color);border-inline-end:0;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action{margin-inline-end:-1px;background-color:transparent}.vxp-input__before--action>.vxp-button{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-button--icon-only{width:calc(var(--vxp-button-height) + 2 * var(--vxp-input-h-padding))}.vxp-input__before--action>.vxp-input-wrapper,.vxp-input__before--action>.vxp-number-input{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-cascader{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-cascader .vxp-cascader__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-color-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-color-picker .vxp-color-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-date-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-date-picker .vxp-date-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-select{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-select .vxp-select__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-time-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-time-picker .vxp-time-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__after{background-color:var(--vxp-input-after-bg-color);border-inline-start:0;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action{margin-inline-start:-1px;background-color:transparent}.vxp-input__after--action>.vxp-button{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-button--icon-only{width:calc(var(--vxp-button-height) + 2 * var(--vxp-input-h-padding))}.vxp-input__after--action>.vxp-input-wrapper,.vxp-input__after--action>.vxp-number-input{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-cascader{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-cascader .vxp-cascader__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-color-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-color-picker .vxp-color-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-date-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-date-picker .vxp-date-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-select{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-select .vxp-select__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-time-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-time-picker .vxp-time-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input--transparent .vxp-input__after,.vxp-input--transparent .vxp-input__before{background-color:transparent}.vxp-select-vars{--vxp-select-list-bg-color:var(--vxp-bg-color-base);--vxp-select-list-b-color:var(--vxp-border-color-light-2);--vxp-select-list-border:var(--vxp-border-shape) var(--vxp-select-list-b-color);--vxp-select-list-radius:var(--vxp-radius-base);--vxp-select-list-shadow:var(--vxp-shadow-base);--vxp-select-check-color:var(--vxp-color-primary-base);--vxp-select-empty-color:var(--vxp-content-color-placeholder);--vxp-select-filter-height:32px;--vxp-select-filter-divider:var(--vxp-border-shape) var(--vxp-border-color-light-2)}.vxp-select{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-flex;width:100%;cursor:pointer}.vxp-select,.vxp-select *,.vxp-select ::after,.vxp-select ::before{box-sizing:border-box}.vxp-select--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-select--filterable{cursor:text}.vxp-select__selector{position:relative;display:inline-flex;align-items:center;width:100%;height:var(--vxp-input-height);padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);cursor:text;background-color:var(--vxp-input-bg-color);border:var(--vxp-border-shape) var(--vxp-input-b-color);border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-select__selector:hover{border-color:var(--vxp-input-b-color-hover)}.vxp-select__selector--focused,.vxp-select__selector:focus,.vxp-select__selector:focus-within{z-index:2;border-color:var(--vxp-input-b-color-focus);box-shadow:var(--vxp-shadow-focus) var(--vxp-input-s-color-focus)}.vxp-select__selector--small{--vxp-input-height:24px;--vxp-input-v-padding:1px}.vxp-select__selector--large{--vxp-input-height:40px;--vxp-input-v-padding:7px}.vxp-select__selector.vxp-select__selector--success{--vxp-input-b-color:var(--vxp-color-success-light-1);--vxp-input-b-color-hover:var(--vxp-color-success-light-1);--vxp-input-s-color-focus:var(--vxp-color-success-opacity-6)}.vxp-select__selector.vxp-select__selector--error{--vxp-input-b-color:var(--vxp-color-error-light-1);--vxp-input-b-color-hover:var(--vxp-color-error-light-1);--vxp-input-s-color-focus:var(--vxp-color-error-opacity-6)}.vxp-select__selector.vxp-select__selector--warning{--vxp-input-b-color:var(--vxp-color-warning-light-1);--vxp-input-b-color-hover:var(--vxp-color-warning-light-1);--vxp-input-s-color-focus:var(--vxp-color-warning-opacity-6)}.vxp-select__selector--readonly{cursor:auto}.vxp-select__selector--transparent{background-color:transparent}.vxp-select__selector--transparent,.vxp-select__selector--transparent--focused,.vxp-select__selector--transparent:focus,.vxp-select__selector--transparent:focus-within,.vxp-select__selector--transparent:hover{border-color:transparent;box-shadow:unset}.vxp-select__selector--disabled{cursor:not-allowed;background-color:var(--vxp-input-bg-color-disabled)}.vxp-select__selector--disabled,.vxp-select__selector--disabled:focus,.vxp-select__selector--disabled:focus-within,.vxp-select__selector--disabled:hover{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-select__selector--disabled .vxp-select__control,.vxp-select__selector--disabled .vxp-select__icon{color:var(--vxp-input-control-color-disabled);pointer-events:none;cursor:not-allowed}.vxp-select__selector--disabled.vxp-select__selector--focused{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-select__control{flex:1 0 0;min-width:0;height:100%;padding:0;font-size:inherit;line-height:var(--vxp-input-line-height);color:var(--vxp-input-control-color);background-color:transparent;border:0;border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-color)}.vxp-select__control:disabled{cursor:not-allowed}.vxp-select__control::-moz-placeholder{color:var(--vxp-input-placeholder-color)}.vxp-select__control::placeholder{color:var(--vxp-input-placeholder-color)}.vxp-select__control::-ms-clear,.vxp-select__control::-ms-reveal{display:none}.vxp-select__selector--readonly .vxp-select__control{cursor:auto}.vxp-select__icon{display:flex;align-items:center;justify-content:center;height:100%;color:var(--vxp-input-icon-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-select__icon--placeholder{min-width:14px;min-height:1px;margin-inline-start:4px;visibility:hidden;opacity:0}.vxp-select__prefix{margin-inline-end:4px}.vxp-select__suffix{margin-inline-start:4px;transition:var(--vxp-transition-opacity)}.vxp-select__clear{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0}.vxp-select__clear,.vxp-select__loading{position:absolute;inset-inline-end:var(--vxp-input-h-padding);min-width:14px;margin-inline-start:4px;cursor:pointer}.vxp-select__loading{pointer-events:none}.vxp-select__selector{cursor:inherit}.vxp-select--disabled{cursor:not-allowed}.vxp-select--multiple .vxp-select__selector{--vxp-input-v-padding:2px;height:auto;min-height:var(--vxp-input-height)}.vxp-select__control,.vxp-select__input{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-select__control{position:relative;display:flex;align-items:center;min-width:40px}.vxp-select--multiple .vxp-select__control{flex-wrap:wrap;min-height:0}.vxp-select--responsive .vxp-select__control{flex-wrap:nowrap}.vxp-select__tags{display:inline-flex;flex:0 0 auto;width:auto;max-width:100%;margin:-1px 0}.vxp-select__tag{max-width:100%;height:calc(var(--vxp-input-height) - 8px);margin:2px 4px;margin-inline-start:0;pointer-events:auto;cursor:pointer}.vxp-select--disabled .vxp-select__tag{cursor:not-allowed}.vxp-select__selector--small .vxp-select__tag>span{height:100%;line-height:1}.vxp-select__control .vxp-select__tag+.vxp-select__tag{margin-inline-start:0}.vxp-select__rest-tip{max-width:100%}.vxp-select__anchor{position:relative;display:inline-block;max-width:100%;height:calc(var(--vxp-input-height) - 8px);margin:2px 4px;margin-inline-start:0}.vxp-select__input{position:absolute;width:100%;height:100%;padding:0;color:inherit;pointer-events:none;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto;background-color:transparent;border:0;outline:0}.vxp-select__input--multiple{position:relative;min-width:1px}.vxp-select__input--visible{pointer-events:auto}.vxp-select__input::-moz-placeholder{color:var(--vxp-input-placeholder-color)}.vxp-select__input::placeholder{color:var(--vxp-input-placeholder-color)}.vxp-select__device{position:absolute;top:0;left:0;overflow:hidden;white-space:pre;visibility:hidden;opacity:0}.vxp-select__placeholder,.vxp-select__selected{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-select__placeholder,.vxp-select__selected--placeholder{color:var(--vxp-input-placeholder-color)}.vxp-select--multiple.vxp-select--filter .vxp-select__placeholder{margin-left:-4px}.vxp-select__popper{min-width:98px}.vxp-select__list{display:flex;flex-direction:column;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxp-select-list-bg-color);border:var(--vxp-select-list-border);border-radius:var(--vxp-select-list-radius);box-shadow:var(--vxp-select-list-shadow)}.vxp-select__list .vxp-native-scroll__wrapper{padding:5px 0}.vxp-select__list--with-extra{padding:5px 0}.vxp-select__list--with-extra .vxp-native-scroll__wrapper{padding:0}.vxp-select__filter{padding:0 6px;border-bottom:var(--vxp-select-filter-divider)}.vxp-select__options{display:flex;flex-direction:column;padding:0;margin:0}.vxp-select__options--has-check .vxp-option{justify-content:space-between}.vxp-select__group{padding:var(--vxp-option-label-v-padding) var(--vxp-option-label-h-padding)}.vxp-select__label{flex:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxp-select__label--group{font-size:var(--vxp-option-group-font-size);color:var(--vxp-option-group-color)}.vxp-select__check{color:var(--vxp-select-check-color)}.vxp-select__selector--focused .vxp-select__arrow{transform:rotate(180deg)}.vxp-select__empty{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:3px 16px;color:var(--vxp-select-empty-color);white-space:nowrap;cursor:default;background-color:var(--vxp-select-list-bg-color)}.vxp-select__clear{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0}