Better error state style

erimicel · Jan 5, 2025 · 06cb6aa · 06cb6aa
1 parent a35d507
commit 06cb6aa
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 10 deletions.
diff --git a/dist/select2-tailwindcss-theme-plain.css b/dist/select2-tailwindcss-theme-plain.css
@@ -205,11 +205,18 @@ select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection,
 select:invalid ~ .select2-container--tailwindcss-3 .select2-selection{
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity, 1))
+}
+.field_with_errors .select2-container--tailwindcss-3 .select2-selection::-moz-placeholder, select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection::-moz-placeholder, select:invalid ~ .select2-container--tailwindcss-3 .select2-selection::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1))
+}
+.field_with_errors .select2-container--tailwindcss-3 .select2-selection::placeholder,
+select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection::placeholder,
+select:invalid ~ .select2-container--tailwindcss-3 .select2-selection::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1))
 }
 
 /* Single Selection */

diff --git a/dist/select2-tailwindcss-theme-plain.min.css b/dist/select2-tailwindcss-theme-plain.min.css
diff --git a/dist/select2-tailwindcss-theme.css b/dist/select2-tailwindcss-theme.css
@@ -74,7 +74,7 @@
 .field_with_errors .select2-container--tailwindcss-3 .select2-selection,
 select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection,
 select:invalid ~ .select2-container--tailwindcss-3 .select2-selection {
-  @apply border-red-500 ring-1 ring-red-500;
+  @apply border-red-500 placeholder:text-red-300 text-red-900;
 }
 
 /* Single Selection */

diff --git a/dist/select2-tailwindcss-theme.min.css b/dist/select2-tailwindcss-theme.min.css