Add custom checkbox focus style

2026-08-25 20:47:16 +00:00 · 2019-12-13 18:41:27 +00:00
parent 1a7f969b59
commit 4e449235b2
1 changed files with 6 additions and 0 deletions
@@ -34,11 +34,17 @@ ul {
 input[type="checkbox"] {
  appearance: none;
  border: 0; // Remove the unchecked checkbox outline in Safari on iOS
+  border-radius: 4px; // Round the focus box-shadow
  cursor: pointer;
  margin-right: 3px;
  position: relative;
  vertical-align: top;

+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
+  }
+
  &::before {
    border: 2px solid var(--color-primary);
    border-radius: 4px;