Fix <select> dropdown background color (#73)

* Remove .form-control on select elements * main.scss: keep bootstrap background color * yarn build
CTFd · Mar 19, 2024 · f4b57b4 · f4b57b4
1 parent 8c5e56b
commit f4b57b4
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 15 deletions.
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -44,13 +44,9 @@ blockquote {
   font-size: 50%;
 }
 
-select.form-control {
-  height: auto !important;
-}
-
 .form-select {
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
-    no-repeat right 0.75rem center/8px 10px !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
+  background-size: 8px 10px;
 }
 
 // HMM

diff --git a/static/assets/main.0aaf0d88.css → static/assets/main.af2a52b9.css b/static/assets/main.0aaf0d88.css → static/assets/main.af2a52b9.css
diff --git a/static/manifest.json b/static/manifest.json
@@ -140,7 +140,7 @@
     ]
   },
   "assets/scss/main.scss": {
-    "file": "assets/main.0aaf0d88.css",
+    "file": "assets/main.af2a52b9.css",
     "src": "assets/scss/main.scss",
     "isEntry": true
   }

diff --git a/templates/macros/forms.html b/templates/macros/forms.html
@@ -68,7 +68,7 @@
         {% endif %}
       </div>
 
-      {{ field(class="form-control form-select") }}
+      {{ field(class="form-select") }}
 
       {% if show_descriptions %}
         {% if field.description %}

diff --git a/templates/settings.html b/templates/settings.html
@@ -53,7 +53,7 @@ <h1>
 
                 <div class="mb-3">
                   <b>{{ form.language.label(class="form-label") }}</b>
-                  {{ form.language(class="form-control form-select", value=language) }}
+                  {{ form.language(class="form-select", value=language) }}
                 </div>
 
                 <hr>
@@ -79,7 +79,7 @@ <h1>
                 </div>
                 <div class="mb-3">
                   <b>{{ form.country.label(class="form-label") }}</b>
-                  {{ form.country(class="form-control form-select", value=country) }}
+                  {{ form.country(class="form-select", value=country) }}
                 </div>
 
                 <hr>

diff --git a/templates/teams/private.html b/templates/teams/private.html
@@ -57,7 +57,7 @@ <h2 class="modal-action text-center w-100">{% trans %}Edit Team{% endtrans %}</h
 
               <div class="mb-2">
                 <b>{{ form.country.label(clas="mb-2") }}</b>
-                {{ form.country(class="form-control form-select") }}
+                {{ form.country(class="form-select") }}
                 <small class="form-text text-muted">
                   {{ form.country.description }}
                 </small>
@@ -114,7 +114,7 @@ <h2 class="modal-action text-center w-100">{% trans %}Choose Captain{% endtrans
                   {# Append members to the select choices #}
                   {% set _ = form.captain_id.choices.append((member.id, member.name)) %}
                 {% endfor %}
-                {{ form.captain_id(class="form-control form-select mb-2") }}
+                {{ form.captain_id(class="form-select mb-2") }}
               </div>
               <div id="results">
                 <div

diff --git a/templates/teams/teams.html b/templates/teams/teams.html
@@ -22,7 +22,7 @@ <h6 class="text-muted text-center pb-3">
         {% with form = Forms.teams.PublicTeamSearchForm(field=field, q=q) %}
           <form method="GET" class="row justify-content-around align-items-center">
             <div class="mb-3 col-md-2">
-              {{ form.field(class="form-control form-select w-100") }}
+              {{ form.field(class="form-select w-100") }}
             </div>
 
             <div class="mb-3 col-md-8">

diff --git a/templates/users/users.html b/templates/users/users.html
@@ -21,7 +21,7 @@ <h6 class="text-muted text-center pb-3">
         {% with form = Forms.users.PublicUserSearchForm(field=field, q=q) %}
           <form method="GET" class="row justify-content-around align-items-center">
             <div class="mb-3 col-md-2">
-              {{ form.field(class="form-control form-select w-100") }}
+              {{ form.field(class="form-select w-100") }}
             </div>
             <div class="mb-3 col-md-8">
               {{ form.q(class="form-control w-100", placeholder=form.q.description) }}