Privat/Website-fabianschieder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-28 20:23:21 +01:00
parent cffbdcd764
commit 40ede746de
2 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
adminer/adminer.css
View File

@ -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 ──────────────────────────────────── */

2
adminer/index.php
View File

@ -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>'