diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index 93756e3796c2..82a4633ea7b5 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -1089,112 +1089,223 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
`;
exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
-
+Array [
-
- a10
+
+ a10
+
+
+
+
+
+
-
+
+
-
-
+
+
+
+
+
+
+
,
+
,
+
+
+ ,
+]
`;
exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 30c9bf3bead3..7f56fb0e375e 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -28,15 +28,28 @@ function handleChange(value) {
}
ReactDOM.render(
- ,
+ <>
+
+
+
+ >,
mountNode,
);
```
diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less
index b17fef7af3fd..3a7f1d02184c 100644
--- a/components/select/style/multiple.less
+++ b/components/select/style/multiple.less
@@ -30,6 +30,11 @@
cursor: text;
}
+ .@{select-prefix-cls}-disabled& {
+ background: @select-multiple-disabled-background;
+ cursor: not-allowed;
+ }
+
&::after {
display: inline-block;
width: 0;
@@ -64,6 +69,12 @@
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
user-select: none;
+ .@{select-prefix-cls}-disabled& {
+ color: @select-multiple-item-disabled-color;
+ border-color: @select-multiple-item-disabled-border-color;
+ cursor: not-allowed;
+ }
+
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
&-content {
display: inline-block;
diff --git a/components/style/themes/dark.less b/components/style/themes/dark.less
index 2a5b427abf8d..55c59ec50dcc 100644
--- a/components/style/themes/dark.less
+++ b/components/style/themes/dark.less
@@ -273,6 +273,9 @@
@select-clear-background: @component-background;
@select-selection-item-bg: fade(@white, 8);
@select-selection-item-border-color: @border-color-split;
+@select-multiple-disabled-background: @component-background;
+@select-multiple-item-disabled-color: #595959;
+@select-multiple-item-disabled-border-color: @popover-background;
// Cascader
// ---
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 265cdd30e68f..3f07a58a580e 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -433,6 +433,9 @@
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
@select-multiple-item-height-lg: 32px;
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
+@select-multiple-disabled-background: @input-disabled-bg;
+@select-multiple-item-disabled-color: #bfbfbf;
+@select-multiple-item-disabled-border-color: @select-border-color;
// Cascader
// ---