Establish styles for select boxes

jonallured · Feb 17, 2024 · 73e3b64 · 73e3b64
1 parent 37ac273
commit 73e3b64
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -42,6 +42,7 @@
   input[type='file'],
   input[type='password'],
   input[type='text'],
+  select,
   textarea {
     @apply bg-off-black;
     @apply block;
@@ -54,19 +55,22 @@
     @apply w-80;
   }
 
-  input[type='file']:invalid {
+  input[type='file']:invalid,
+  select:invalid {
     @apply text-dark-gray;
   }
 
   input:focus[type='date'],
   input:focus[type='file'],
   input:focus[type='password'],
   input:focus[type='text'],
+  select:focus,
   textarea:focus,
   input:hover[type='date'],
   input:hover[type='file'],
   input:hover[type='password'],
   input:hover[type='text'],
+  select:hover,
   textarea:hover {
     @apply border-pink;
     @apply ring-0;

diff --git a/app/views/static/form.html.haml b/app/views/static/form.html.haml
@@ -10,6 +10,11 @@
   %textarea(placeholder="write a note")
   %input(type="password" placeholder="password")
   %input(required="true" type="file")
+  %select(required="true")
+    %option(value="" disabled="true" selected hidden) pick parser
+    %option first
+    %option second
+    %option third
   %button(type="submit") submit
 
 %h2 Another Form