Drop the browser focus ring on form controls, keep the border highlight

A global input:focus/textarea:focus/select:focus rule removes the
default outline and sets border-color to the accent colour instead --
matching the pattern a few components (.card-row__text,
.project-head__title input, .project-head__desc) already used with
their own higher-specificity :focus rules, which still take precedence
for their extra focus styling (background swap, etc.). This now also
covers plain form inputs, the dashboard's project-name textarea, the
sidebar's project select, and the inbox/kanban 'new card' inputs,
which previously fell back to the browser's default outline.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 20:10:12 +01:00
co-authored by Claude Sonnet 5
parent baef3078da
commit 374d607ce1
+10
View File
@@ -34,6 +34,16 @@
box-sizing: border-box;
}
/* No browser focus ring on form controls -- the border colour change is
highlight enough (components with more elaborate focus styles, e.g.
.card-row__text, override this with their own higher-specificity rule). */
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--accent);
}
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;