From 819109d5a4940525a838688e32905f1547a056e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20Tollk=C3=BChn?= <s.tollkuehn@bnvb-ingenieure.de>
Date: Thu, 22 Oct 2026 18:35:57 +0200
Subject: [PATCH] dropdown field arrow

---
 css/style.css         | 31 +++++++++++++++++++++++++++++++
 templates/confirm.php | 22 ++++++++++++----------
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6f92061..2baa75b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -72,6 +72,37 @@
     overflow-wrap: anywhere;
 }
 
+/*
+ * Select box with a theme-colored chevron instead of the
+ * native arrow, which is not visible on every platform.
+ *
+ * ┌───────────────────────────────┐
+ * │ Personal                 ⌄    │
+ * └───────────────────────────────┘
+ */
+.atocal-select {
+    position: relative;
+    display: block;
+}
+
+.atocal-select::after {
+    content: "";
+    position: absolute;
+    top: calc(50% - 5px);
+    right: 12px;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid var(--color-text-maxcontrast);
+    border-bottom: 2px solid var(--color-text-maxcontrast);
+    transform: rotate(45deg);
+    pointer-events: none;
+}
+
+.atocal-select select {
+    appearance: none;
+    padding-right: 32px;
+}
+
 .atocal-row select,
 .atocal-row input[type="text"] {
     align-self: center;
diff --git a/templates/confirm.php b/templates/confirm.php
index 9cee79e..f2ef060 100644
--- a/templates/confirm.php
+++ b/templates/confirm.php
@@ -116,16 +116,18 @@ $l = $_['l10n'];
                         <label for="atocal-calendar">
                             <strong><?= $h($l->t('Calendar')) ?></strong>
                         </label>
-                        <select id="atocal-calendar" name="calendarId">
-                            <?php foreach ($_['calendars'] as $calendar): ?>
-                                <option
-                                    value="<?= $h($calendar['value']) ?>"
-                                    <?= $calendar['value'] === $_['calendarId'] ? 'selected' : '' ?>
-                                >
-                                    <?= $h($calendar['displayName']) ?>
-                                </option>
-                            <?php endforeach; ?>
-                        </select>
+                        <span class="atocal-select">
+                            <select id="atocal-calendar" name="calendarId">
+                                <?php foreach ($_['calendars'] as $calendar): ?>
+                                    <option
+                                        value="<?= $h($calendar['value']) ?>"
+                                        <?= $calendar['value'] === $_['calendarId'] ? 'selected' : '' ?>
+                                    >
+                                        <?= $h($calendar['displayName']) ?>
+                                    </option>
+                                <?php endforeach; ?>
+                            </select>
+                        </span>
                     </div>
                 <?php endif; ?>