diff --git a/assets/default.css b/assets/default.css
index 6a3d4d7c..81d70ceb 100644
--- a/assets/default.css
+++ b/assets/default.css
@@ -80,7 +80,7 @@ BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
 /* END: https://www.w3.org/TR/CSS22/ */
 
 @media not screen {
-    header select.documentBranch, nav, .navButtonContainer, .headerlink {
+    header .documentBranch select, nav, .navButtonContainer, .headerlink {
         display: none;
     }
 
diff --git a/assets/document-branches.js b/assets/document-branches.js
index eb7a443d..9e82d2a3 100644
--- a/assets/document-branches.js
+++ b/assets/document-branches.js
@@ -1,5 +1,5 @@
 window.addEventListener("load", function() {
-    let select = document.querySelector("header select.documentBranch");
+    let select = document.querySelector("header .documentBranch select");
     while (select.firstChild) {
         select.removeChild(select.firstChild);
     }
diff --git a/assets/screen-narrow.css b/assets/screen-narrow.css
index ad2473bf..a538d98d 100644
--- a/assets/screen-narrow.css
+++ b/assets/screen-narrow.css
@@ -9,7 +9,7 @@ header .logoContainer {
     text-align: center;
 }
 
-header .logoContainer, header select.documentBranch {
+header .logoContainer, header .documentBranch select {
     text-shadow: 0 0 3px #050a02, 0 0 3px #050a02;
 }
 
diff --git a/assets/screen-noscript.css b/assets/screen-noscript.css
index 5ac30fa6..9222faef 100644
--- a/assets/screen-noscript.css
+++ b/assets/screen-noscript.css
@@ -1,9 +1,9 @@
-header select.documentBranch {
+header .documentBranch::after, header .documentBranch select {
     display: none;
 }
 
-header span.documentBranch {
-    display: inline;
+header .documentBranch span {
+    display: initial;
 }
 
 nav {
diff --git a/assets/screen.css b/assets/screen.css
index 9b3bc0e8..d9f5f44c 100644
--- a/assets/screen.css
+++ b/assets/screen.css
@@ -67,13 +67,32 @@ header h1 {
     margin-bottom: 2rem;
 }
 
-header span.documentBranch {
-    border: 1px dashed #efdddd;
+header .documentBranch span {
     padding: 0 5px;
     display: none;
 }
 
-header select.documentBranch {
+header .documentBranch {
+    display: inline-block;
+    position: relative;
+    border: 1px dashed #efdddd;
+}
+
+header .documentBranch::after {
+    content: "";
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    right: 5px;
+    bottom: 5px;
+    width: 0;
+    height: 0;
+    border-left: 0.125em solid transparent;
+    border-right: 0.125em solid transparent;
+    border-top: 0.125em solid #efdddd;
+}
+
+header .documentBranch select {
     background: none;
     color: #efdddd;
     border: none;
@@ -82,18 +101,18 @@ header select.documentBranch {
     font-family: sans-serif;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: 1px dashed #efdddd;
+    appearance: none;
     cursor: pointer;
     padding: 0 5px;
     text-align: center;
     text-align-last: center;
 }
 
-header select.documentBranch:hover {
+header .documentBranch select:hover {
     text-decoration: underline;
 }
 
-header select.documentBranch option {
+header .documentBranch option {
     color: initial;
     font-size: initial;
     font-weight: initial;
diff --git a/documentation-generator/template.html b/documentation-generator/template.html
index 7ffe5531..5d8030a6 100644
--- a/documentation-generator/template.html
+++ b/documentation-generator/template.html
@@ -30,8 +30,10 @@ $endif$
     <div class="logoContainer">
         <h1>
             Radicale
-            <span class="documentBranch">$branch$</span>
-            <select class="documentBranch"></select>
+            <span class="documentBranch">
+                <span>$branch$</span>
+                <select></select>
+            </span>
         </h1>
         <p>Free and Open-Source CalDAV and CardDAV Server</p>
     </div>