From f0ec3d62b578689042cfee5221ef459fb2f2c900 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Sun, 12 Jan 2025 23:44:16 +0100 Subject: [PATCH] Avoid 2 borders when focus-visible on text inputs By having the focus-visible outline overlapping the regular border things look a bit more sane on text input elements. --- app/styles/input.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/app/styles/input.css b/app/styles/input.css index 464a143c..66626779 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -60,6 +60,22 @@ textarea { /* Account for borders on text inputs, buttons dont have borders */ padding: calc(0.5em - 1px) var(--input-xpadding); } +input:not([type]):focus-visible, +input[type=date]:focus-visible, +input[type=datetime-local]:focus-visible, +input[type=email]:focus-visible, +input[type=month]:focus-visible, +input[type=number]:focus-visible, +input[type=password]:focus-visible, +input[type=search]:focus-visible, +input[type=tel]:focus-visible, +input[type=text]:focus-visible, +input[type=time]:focus-visible, +input[type=url]:focus-visible, +input[type=week]:focus-visible, +textarea:focus-visible { + outline-offset: -1px; +} /* ------- BUTTON ACTIVATIONS -------- */