Update forms.css

Author: SebKay

resources/css/forms.css

@@ -22,33 +22,35 @@
     @apply flex items-center gap-x-2;
 }
 
-@utility input {
+@utility field {
     @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
-    @apply block text-base w-full;
+}
+
+@utility input {
+    @apply field block text-base w-full;
 }
 
 @utility textarea {
-    @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
-    @apply block text-base w-full;
+    @apply field block text-base w-full;
     @apply min-h-32;
 }
 
 @utility select {
-    @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
-    @apply block text-base w-full;
+    @apply field block text-base w-full;
     @apply cursor-pointer;
 }
 
+@utility option {
+    @apply field;
+    @apply cursor-pointer size-5 text-brand-800;
+}
+
 @utility checkbox {
-    @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
-    @apply cursor-pointer;
-    @apply size-5 text-brand-800;
+    @apply option;
 }
 
 @utility radio {
-    @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
-    @apply cursor-pointer;
-    @apply size-5 text-brand-800;
+    @apply option;
     @apply rounded-full;
 }