diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css index c41716bcfcf..001fe9e67ba 100644 --- a/packages/styles/src/antd/index.css +++ b/packages/styles/src/antd/index.css @@ -12,6 +12,32 @@ @apply dark:border-border/60 dark:border; } -.form-valid-error .ant-select-selector { +/** select 选择器的样式 */ +.form-valid-error .ant-select .ant-select-selector { + border-color: hsl(var(--destructive)) !important; +} + +.form-valid-error .ant-select-focused .ant-select-selector { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important; +} + +/** 数字输入框样式 */ +.form-valid-error .ant-input-number-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); +} + +/** 密码输入框样式 */ +.form-valid-error .ant-input-affix-wrapper:hover { border-color: hsl(var(--destructive)); + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); +} + +/** 区间选择器下面来回切换时的样式 */ +.ant-app .form-valid-error .ant-picker-active-bar { + background-color: hsl(var(--destructive)); +} + +/** 时间选择器的样式 */ +.ant-app .form-valid-error .ant-picker-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); } diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue index 5915c2c5083..20dd88ee75d 100644 --- a/playground/src/views/examples/form/rules.vue +++ b/playground/src/views/examples/form/rules.vue @@ -166,6 +166,15 @@ const [Form, formApi] = useVbenForm({ label: '区间选择框', rules: 'selectRequired', }, + { + component: 'InputPassword', + componentProps: { + placeholder: '请输入', + }, + fieldName: 'password', + label: '密码', + rules: 'required', + }, ], // 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个 wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',