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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user