Added arrow-down for select lists

dyatlov-a · Sep 30, 2024 · 6fb3203 · 6fb3203
1 parent bd4159c
commit 6fb3203
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputSelectList.razor b/src/Inc.TeamAssistant.WebUI/Components/InputSelectList.razor
@@ -28,7 +28,7 @@ else
         Value="_value"
         ValueExpression="@(() => _value)"
         ValueChanged="@((TValue? v) => SetCurrentValue(v))"
-        class="@($"form-control form-control_enabled {CssClass} {ParentCssClass}")">
+        class="@($"form-control form-control_select-list form-control_enabled {CssClass} {ParentCssClass}")">
         @if (HasEmptyValue)
         {
             <option value=""></option>

diff --git a/src/Inc.TeamAssistant.WebUI/wwwroot/css/main.css b/src/Inc.TeamAssistant.WebUI/wwwroot/css/main.css
@@ -141,10 +141,9 @@ html {
     background-color: #dfdfdf;
     transition: border 0.3s;
 }
-.form-control, select {
+.form-control {
     min-height: 45px;
     font-size: 1rem;
-    -webkit-appearance: none;
 }
 .form-control:focus, .form-control_enabled:hover {
     border: 3px solid #000;
@@ -168,6 +167,13 @@ html {
     font-size: 1rem;
     color: #dc3545;
 }
+.form-control_select-list {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: #dfdfdf url('../imgs/arrow-down.png') calc(100% - 5px) center no-repeat;
+    padding-right: 20px;
+}
 /* ROOT COMPONENTS */
 .title {
     font-size: 2.4rem;

diff --git a/src/Inc.TeamAssistant.WebUI/wwwroot/imgs/arrow-down.png b/src/Inc.TeamAssistant.WebUI/wwwroot/imgs/arrow-down.png