:root { --van-field-label-width: 6.2em; --van-field-label-color: var(--van-text-color); --van-field-label-margin-right: var(--van-padding-sm); --van-field-input-text-color: var(--van-text-color); --van-field-input-error-text-color: var(--van-danger-color); --van-field-input-disabled-text-color: var(--van-text-color-3); --van-field-placeholder-text-color: var(--van-text-color-3); --van-field-icon-size: 18px; --van-field-clear-icon-size: 18px; --van-field-clear-icon-color: var(--van-gray-5); --van-field-right-icon-color: var(--van-gray-6); --van-field-error-message-color: var(--van-danger-color); --van-field-error-message-font-size: 12px; --van-field-text-area-min-height: 60px; --van-field-word-limit-color: var(--van-gray-7); --van-field-word-limit-font-size: var(--van-font-size-sm); --van-field-word-limit-line-height: 16px; --van-field-disabled-text-color: var(--van-text-color-3); --van-field-required-mark-color: var(--van-red); } .van-field { flex-wrap: wrap; } .van-field__label { flex: none; box-sizing: border-box; width: var(--van-field-label-width); margin-right: var(--van-field-label-margin-right); color: var(--van-field-label-color); text-align: left; word-wrap: break-word; } .van-field__label--center { text-align: center; } .van-field__label--right { text-align: right; } .van-field__label--top { display: flex; width: 100%; text-align: left; margin-bottom: var(--van-padding-base); word-break: break-word; } .van-field__label--required:before { margin-right: 2px; color: var(--van-field-required-mark-color); content: "*"; } .van-field--disabled .van-field__label { color: var(--van-field-disabled-text-color); } .van-field__value { overflow: visible; } .van-field__body { display: flex; align-items: center; } .van-field__control { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; color: var(--van-field-input-text-color); line-height: inherit; text-align: left; background-color: transparent; border: 0; resize: none; -webkit-user-select: auto; user-select: auto; } .van-field__control::-webkit-input-placeholder { color: var(--van-field-placeholder-text-color); } .van-field__control::placeholder { color: var(--van-field-placeholder-text-color); } .van-field__control:read-only { cursor: default; } .van-field__control:disabled { color: var(--van-field-input-disabled-text-color); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--van-field-input-disabled-text-color); } .van-field__control--center { justify-content: center; text-align: center; } .van-field__control--right { justify-content: flex-end; text-align: right; } .van-field__control--custom { display: flex; align-items: center; min-height: var(--van-cell-line-height); } .van-field__control--error::-webkit-input-placeholder { color: var(--van-field-input-error-text-color); -webkit-text-fill-color: currentColor; } .van-field__control--error, .van-field__control--error::placeholder { color: var(--van-field-input-error-text-color); -webkit-text-fill-color: currentColor; } .van-field__control--min-height { min-height: var(--van-field-text-area-min-height); } .van-field__control[type="date"], .van-field__control[type="time"], .van-field__control[type="datetime-local"] { min-height: var(--van-cell-line-height); } .van-field__control[type="search"] { -webkit-appearance: none; } .van-field__clear, .van-field__icon, .van-field__button, .van-field__right-icon { flex-shrink: 0; } .van-field__clear, .van-field__right-icon { margin-right: calc(var(--van-padding-xs) * -1); padding: 0 var(--van-padding-xs); line-height: inherit; } .van-field__clear { color: var(--van-field-clear-icon-color); font-size: var(--van-field-clear-icon-size); cursor: pointer; } .van-field__left-icon .van-icon, .van-field__right-icon .van-icon { display: block; font-size: var(--van-field-icon-size); line-height: inherit; } .van-field__left-icon { margin-right: var(--van-padding-base); } .van-field__right-icon { color: var(--van-field-right-icon-color); } .van-field__button { padding-left: var(--van-padding-xs); } .van-field__error-message { color: var(--van-field-error-message-color); font-size: var(--van-field-error-message-font-size); text-align: left; } .van-field__error-message--center { text-align: center; } .van-field__error-message--right { text-align: right; } .van-field__word-limit { margin-top: var(--van-padding-base); color: var(--van-field-word-limit-color); font-size: var(--van-field-word-limit-font-size); line-height: var(--van-field-word-limit-line-height); text-align: right; }