STYLE FIX refining aspect of dropdowns

resources/css/components/post-grid.css

@@ -19,6 +19,7 @@
       @apply md:justify-self-end text-primary;
       input {
         @apply w-full md:w-auto py-2 px-4 border border-primary rounded-full;
+        padding-right: 33px;
         &::placeholder {
           @apply text-base font-normal text-carhop-green-700;
         }
@@ -30,6 +31,22 @@
 
     select {
       @apply w-full md:w-auto border border-carhop-green-700 text-carhop-green-700 rounded-full py-2 px-4 max-w-full text-base;
+
+      appearance: none; /* Disable the default arrow */
+      -webkit-appearance: none; /* For WebKit-based browsers */
+      -moz-appearance: none; /* For Firefox */
+      /* width: 100%;
+      padding: 10px 35px 10px 10px;
+      font-size: 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px; */
+      background-color: #fff;
+      background-image: url('../resources/img/elements/select-drop-button.svg');
+
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      background-size: 30px;
+      cursor: pointer;
     }
 
     select[name='etiquettes'] {
@@ -41,7 +58,7 @@
     }
 
     select[name='sort_by'] {
-      @apply md:ml-auto;
+      @apply md:ml-auto pr-12;
     }
   }
 

resources/img/elements/select-drop-button.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="17" transform="rotate(-90 18 18)" stroke="#136F63" stroke-width="2"/>
+<path d="M10.7992 14.76L17.8006 21.6L25.1992 14.76" stroke="#136F63" stroke-width="2"/>
+</svg>