eleven / messenger Public

web: give <select> the same styled default as inputs/textareas (#1017)

Plain selects rendered as unstyled native controls everywhere (profile
DM-privacy picker, bot-creation forms) except inside the Admin mini-app's
.admin-row, the one place someone had already given select a proper
rounded/bordered look. Elevate that look to the shared style.css default
instead of leaving it scoped to one app.

James Adam 3 months ago 191e493ae3bd5baacb96b59d9c1d50e0c49f386c parent ec71874

2 files changed, +20 −0

changelog/2026-07-15-select-styling.md +3 −0
web/static/style.css +17 −0

diff --git a/changelog/2026-07-15-select-styling.md b/changelog/2026-07-15-select-styling.md

new file mode 100644

index 0000000..f11b78c

--- /dev/null

+++ b/changelog/2026-07-15-select-styling.md

@@ -0,0 +1,3 @@

+🤖 Dropdown menus (like "Who can message you directly" in your profile, or the

+model picker when adding a bot) now match the rounded, bordered look of every

+other field instead of rendering as a plain, unstyled browser control.

diff --git a/web/static/style.css b/web/static/style.css

index cf97ce1..60b3f7e 100644

--- a/web/static/style.css

+++ b/web/static/style.css

@@ -338,6 +338,23 @@ input, textarea {

caret-color: var(--accent); /* the typing cursor picks up the accent (à la iMessage) */

}

input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

+/* Plain <select> otherwise renders as an unstyled native control everywhere it

+ appears (profile/bot-creation forms, admin) — the Admin mini-app's

+ `.admin-row select` (apps/admin.js) is the one place it already looks

+ right, so the same rounded field (native arrow left alone) becomes the

+ default here instead of staying scoped to that one app. */

+select {

+ font: inherit;

+ border: 1px solid var(--border);

+ border-radius: 12px;

+ padding: 12px 14px;

+ background: var(--panel);

+ color: var(--ink);

+ width: 100%;

+ cursor: var(--ui-cursor, pointer);

+select:focus { outline: 2px solid var(--accent); border-color: transparent; }

+select:disabled { opacity: 0.5; cursor: default; }

/* the message box doesn't get the bright focus ring (chat-app convention) — the

coloured caret is the cue. */

.composer .composer-input:focus { outline: none; border-color: var(--border); }