Commit 77c68eb401 for woocommerce
commit 77c68eb401ce5e4dfd271a830ddc5e817c6dd52d
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Wed Dec 3 12:00:02 2025 +0100
Prevent Select2 styles from leaking into other plugins (#61956)
* Prevent Select2 styles from leaking into other plugins
* Add changelog file
diff --git a/plugins/woocommerce/changelog/fix-61720-select2-styles-leaking-into-other-plugins b/plugins/woocommerce/changelog/fix-61720-select2-styles-leaking-into-other-plugins
new file mode 100644
index 0000000000..17814328fb
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-61720-select2-styles-leaking-into-other-plugins
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent Select2 styles from leaking into other plugins
diff --git a/plugins/woocommerce/client/legacy/css/forms.scss b/plugins/woocommerce/client/legacy/css/forms.scss
index 2797863b00..2be90dbba5 100644
--- a/plugins/woocommerce/client/legacy/css/forms.scss
+++ b/plugins/woocommerce/client/legacy/css/forms.scss
@@ -150,74 +150,76 @@
}
}
-.select2-container {
- width: 100%;
+:where(.woocommerce) {
+ .select2-container {
+ width: 100%;
- .select2-selection--single {
- height: auto;
-
- .select2-selection__rendered {
- padding: 0.5em;
- line-height: normal;
- box-sizing: border-box;
- color: var(--wc-form-color-text, #444);
- font-weight: normal;
- }
+ .select2-selection--single {
+ height: auto;
- .select2-selection__placeholder {
- color: #999;
- }
+ .select2-selection__rendered {
+ padding: 0.5em;
+ line-height: normal;
+ box-sizing: border-box;
+ color: var(--wc-form-color-text, #444);
+ font-weight: normal;
+ }
- .select2-selection__arrow {
- position: absolute;
- top: 2px;
- right: 0.5em;
- height: 100%;
- width: 16px;
+ .select2-selection__placeholder {
+ color: #999;
+ }
- b {
- border: none;
- display: block;
- background:
- url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=)
- no-repeat;
- background-size: 16px;
- width: 16px;
- height: 16px;
+ .select2-selection__arrow {
position: absolute;
- top: 50%;
- left: 0;
- margin: -8px 0 0;
+ top: 2px;
+ right: 0.5em;
+ height: 100%;
+ width: 16px;
+
+ b {
+ border: none;
+ display: block;
+ background:
+ url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=)
+ no-repeat;
+ background-size: 16px;
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ margin: -8px 0 0;
+ }
}
}
- }
- .select2-selection,
- .select2-dropdown {
- background-color: var(--wc-form-color-background, #fff);
- border: var(--wc-form-border-width, 1px) solid var(--wc-form-border-color, #aaa);
- border-radius: var(--wc-form-border-radius, 4px);
- }
+ .select2-selection,
+ .select2-dropdown {
+ background-color: var(--wc-form-color-background, #fff);
+ border: var(--wc-form-border-width, 1px) solid var(--wc-form-border-color, #aaa);
+ border-radius: var(--wc-form-border-radius, 4px);
+ }
- &.select2-container--open .select2-dropdown--above {
- border-bottom: none;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
+ &.select2-container--open .select2-dropdown--above {
+ border-bottom: none;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
- &.select2-container--open .select2-dropdown--below {
- border-top: none;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
+ &.select2-container--open .select2-dropdown--below {
+ border-top: none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
}
-}
-.select2-results__options {
- list-style: none;
- margin: 0;
- padding: 0;
-}
+ .select2-results__options {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
-.select2-results__option {
- margin: 0;
+ .select2-results__option {
+ margin: 0;
+ }
}