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;
|
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 {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||||
|
|||||||
Reference in New Issue
Block a user