diff --git a/assets/css/src/generic/_forms-select2.scss b/assets/css/src/generic/_forms-select2.scss
new file mode 100644
index 0000000000..c43f5804fb
--- /dev/null
+++ b/assets/css/src/generic/_forms-select2.scss
@@ -0,0 +1,200 @@
+/*
+ * These are temporary styles until we get rid of select2
+ *
+ * Usage:
+
+ const data = [{
+ id: '1',
+ count: 1,
+ tag: 'Tag',
+ text: 'Option',
+ }];
+
+ const templateRendered = (option) => {
+ let tpl = '';
+ if (option.tag !== undefined) {
+ tpl += `${option.tag}`;
+ }
+ tpl += `${option.text}`;
+ if (option.count !== undefined) {
+ tpl += `${option.count}`;
+ }
+ return tpl;
+ };
+
+ element.select2({
+ data,
+ dropdownCssClass: 'mailpoet-form-select2-dropdown',
+ escapeMarkup: (markup) => markup,
+ templateResult: templateRendered,
+ templateSelection: templateRendered,
+ });
+
+ *
+ */
+.mailpoet-form-select {
+ svg {
+ ~ .select2 .select2-selection__rendered { padding-left: 32px !important; }
+ }
+
+ &.mailpoet-form-input-small svg {
+ ~ .select2 .select2-selection__rendered { padding-left: 28px !important; }
+ }
+
+ .select2-container {
+ width: 100% !important;
+ }
+
+ .select2-selection {
+ background: transparent !important;
+ border: 0 !important;
+ height: auto !important;
+ outline: none;
+ }
+
+ .select2-selection__arrow {
+ display: none !important;
+ }
+
+ .select2-selection__rendered {
+ color: $color-text !important;
+ line-height: 22px !important;
+ padding: 7px 24px 9px 16px !important;
+ vertical-align: top;
+ }
+
+ .select2-selection--multiple .select2-selection__rendered {
+ padding-bottom: 0 !important;
+ }
+
+ .select2-selection__choice {
+ background: $color-tertiary-light !important;
+ border: 0 !important;
+ font-size: 14px;
+ height: 24px !important;
+ margin: 0 7px 7px 0 !important;
+ padding: 1px 24px 1px 6px !important;
+ }
+
+ .select2-selection__choice__remove {
+ color: rgba($color-text, .4) !important;
+ font-size: 22px;
+ line-height: 24px;
+ margin-right: 0 !important;
+ padding-top: 2px;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 0;
+ width: 24px;
+ }
+
+ .select2-search--inline {
+ margin-bottom: 7px;
+ }
+
+ .select2-search__field {
+ line-height: 24px;
+ margin-top: 0 !important;
+
+ &::placeholder {
+ color: $color-text-light;
+ }
+ }
+}
+
+.mailpoet-form-select2-dropdown {
+ border-color: $color-input-border;
+ border-radius: 4px;
+ box-sizing: content-box;
+ color: $color-text;
+ font-family: $font-family;
+ font-size: $font-size;
+ margin-left: -1px;
+
+ &.select2-dropdown--below { margin-top: -4px; }
+ &.select2-dropdown--above { margin-bottom: -4px; }
+
+ .select2-search--dropdown {
+ padding: 6px 8px;
+
+ .select2-search__field {
+ background: #fff;
+ border: 1px solid $color-input-border;
+ border-radius: 4px;
+ font-size: 14px;
+ padding: 8px;
+
+ &::placeholder {
+ color: $color-text-light;
+ }
+ }
+ }
+
+ .select2-results__options {
+ padding: 4px 0;
+ }
+
+ .select2-results__option {
+ align-items: center;
+ display: flex;
+ padding: 12px 16px;
+
+ &[aria-selected=true] {
+ background-color: $color-secondary-light;
+ color: $color-text;
+ }
+ }
+
+ .select2-results__option--highlighted {
+ background-color: $color-tertiary-light;
+
+ &[aria-selected=true] {
+ background-color: $color-secondary-light-hover;
+ }
+ }
+}
+
+.mailpoet-form-select .select2-selection__choice,
+.mailpoet-form-select2-dropdown .select2-results__option {
+ align-items: center;
+ box-sizing: border-box;
+ display: flex;
+ max-width: 100%;
+ position: relative;
+}
+
+.mailpoet-form-select2-text {
+ min-width: 0; // required for ellipsis to work
+
+ span {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+
+.mailpoet-form-select2-tag {
+ background: $color-tertiary;
+ border-radius: 2px;
+ box-sizing: border-box;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 14px;
+ margin-right: 6px;
+ padding: 2px 5px;
+}
+
+.mailpoet-form-select2-count {
+ background: rgba($color-text-light, .5);
+ border-radius: 10px;
+ box-sizing: border-box;
+ color: $color-text;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 14px;
+ margin-left: 6px;
+ padding: 1px 5px;
+}
diff --git a/assets/css/src/mailpoet-plugin.scss b/assets/css/src/mailpoet-plugin.scss
index 8f632d10a2..36eb3cecb1 100644
--- a/assets/css/src/mailpoet-plugin.scss
+++ b/assets/css/src/mailpoet-plugin.scss
@@ -28,6 +28,7 @@
@import 'generic/buttons-spinners';
@import 'generic/forms-input';
@import 'generic/forms-select';
+@import 'generic/forms-select2';
@import 'generic/helpers';
// Components