fix: custom select dropdown arrow visible on dark background

Native browser select arrows don't adapt to dark backgrounds.
Added appearance:none with a light SVG chevron via background-image.
This commit is contained in:
Claus Lohmar 2026-07-23 09:17:42 +00:00
parent 4bebbd9da9
commit b2dbfe81f9
2 changed files with 15 additions and 1 deletions

View file

@ -162,6 +162,20 @@ body {
font-family: inherit;
font-size: 0.82rem;
transition: border-color 0.15s;
cursor: pointer;
}
.pve-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.6rem center;
padding-right: 2rem;
}
.pve-select option {
background: var(--pve-panel-bg);
color: var(--pve-text);
}
.pve-input:focus, .pve-select:focus {
border-color: var(--pve-accent);

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VM Bench — Proxmox Image Converter</title>
<link rel="stylesheet" href="/static/proxmox.css?v=2">
<link rel="stylesheet" href="/static/proxmox.css?v=4">
</head>
<body>