Enhance port input field with custom number input spinners and dropdown styling for improved usability

adminer/adminer.css

@@ -227,6 +227,69 @@ input:focus, textarea:focus, select:focus {
 }
 textarea { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; resize:vertical; }
 
+/* ── SELECT DROPDOWN ──────────────────────────── */
+select {
+    appearance:none;
+    -webkit-appearance:none;
+    padding-right:2.6rem;
+    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat:no-repeat;
+    background-position:right 12px center;
+    background-size:16px 16px;
+    cursor:pointer;
+}
+select:focus {
+    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+select option {
+    background:var(--surface);
+    color:var(--text);
+    padding:8px 12px;
+}
+select option:checked {
+    background:rgba(99,102,241,.25);
+    color:#a5b4fc;
+}
+
+/* ── NUMBER INPUT (Port) ──────────────────────── */
+input[type=number] {
+    appearance:textfield;
+    -moz-appearance:textfield;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance:none;
+    appearance:none;
+    margin:0;
+}
+.field-port {
+    position:relative;
+}
+.field-port input[type=number] {
+    padding-right:2.8rem;
+}
+.field-port__spinners {
+    position:absolute;
+    right:8px; top:50%; transform:translateY(-50%);
+    display:flex; flex-direction:column; gap:2px;
+}
+.field-port__spinners button {
+    width:22px; height:22px;
+    display:flex; align-items:center; justify-content:center;
+    background:rgba(255,255,255,.07);
+    border:1px solid var(--border);
+    border-radius:6px;
+    color:var(--text-muted);
+    cursor:pointer; font-size:.7rem; line-height:1;
+    padding:0;
+    transition:background var(--transition), color var(--transition), border-color var(--transition);
+}
+.field-port__spinners button:hover {
+    background:rgba(99,102,241,.2);
+    border-color:rgba(99,102,241,.4);
+    color:#a5b4fc;
+}
+
 .field { margin-bottom:1rem; }
 
 /* ── BUTTONS ──────────────────────────────────── */

adminer/index.php

@@ -181,7 +181,7 @@ if (!admin_is_logged_in()) {
     $body .= '<form method="post">'
         . '<input type="hidden" name="action" value="probe">'
         . '<div class="field"><label>Host</label><input name="host" value="' . h($prefHost) . '" placeholder="localhost"></div>'
-        . '<div class="field"><label>Port</label><input name="port" type="number" value="' . h((string)$prefPort) . '"></div>'
+        . '<div class="field"><label>Port</label><div class="field-port"><input id="port-input" name="port" type="number" value="' . h((string)$prefPort) . '" min="1" max="65535"><div class="field-port__spinners"><button type="button" onclick="var i=document.getElementById(\'port-input\');i.value=Math.min(65535,+(i.value||3306)+1)">▲</button><button type="button" onclick="var i=document.getElementById(\'port-input\');i.value=Math.max(1,+(i.value||3306)-1)">▼</button></div></div></div>'
         . '<div class="field"><label>Benutzer</label><input name="user" value="' . h($prefUser) . '"></div>'
         . '<div class="field"><label>Passwort</label><input name="pass" type="password" value="' . h($prefPass) . '"></div>'
         . '<button class="btn btn-ghost btn-sm" type="submit">Datenbanken laden</button>'