From b26f042a397f842104fb2055554bc9092eaea328 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 27 Apr 2024 22:44:26 +0200
Subject: [PATCH] select field safari styling

---
 src/app/components/add-task/add-task.component.html |  5 +++++
 src/app/components/add-task/add-task.component.scss | 11 +++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index 3a3e5ec..9417906 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/src/app/components/add-task/add-task.component.html
@@ -226,6 +226,11 @@
             <option value="User Story">User Story</option>
             <option value="Technical Task">Technical Task</option>
           </select>
+          <img
+            class="open"
+            src="./../../../assets/img/add-task/arrow-down.svg"
+            alt=""
+          />
           <div class="error-msg">
             @if (!category.valid && category.touched) {
             <p>You must select a category</p>
diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss
index 22660bd..802202e 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/src/app/components/add-task/add-task.component.scss
@@ -46,6 +46,9 @@ select {
   padding: 12px 21px;
   width: calc(100% - 42px);
   resize: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
 input.ng-invalid.ng-touched,
@@ -273,9 +276,17 @@ p {
 }
 
 .category {
+  position: relative;
   select {
     width: 100%;
   }
+  img {
+    position: absolute;
+    top: 53px;
+    right: 20px;
+    width: 14px;
+    height: 7px;
+  }
 }
 
 /*------------- SUBMIT BUTTON -------------*/