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:
parent
4bebbd9da9
commit
b2dbfe81f9
2 changed files with 15 additions and 1 deletions
|
|
@ -162,6 +162,20 @@ body {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
transition: border-color 0.15s;
|
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 {
|
.pve-input:focus, .pve-select:focus {
|
||||||
border-color: var(--pve-accent);
|
border-color: var(--pve-accent);
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>VM Bench — Proxmox Image Converter</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue