From 10f6e708e5a5b7fe68d30b86aeaf455d1e1d7daa Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sat, 21 Nov 2020 23:31:14 +0800
Subject: chore: improve a11y of traffic chart style selection

---
 src/components/Selection.module.css | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

(limited to 'src/components/Selection.module.css')

diff --git a/src/components/Selection.module.css b/src/components/Selection.module.css
index c5181ca..ba47089 100644
--- a/src/components/Selection.module.css
+++ b/src/components/Selection.module.css
@@ -1,16 +1,23 @@
-.root {
+.fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
   display: flex;
   flex-wrap: wrap;
 }
 
-.item {
-  flex-grow: 0;
-  margin-right: 10px;
-  margin-bottom: 10px;
+.input + .cnt {
+  border: 1px solid transparent;
+  border-radius: 8px;
   cursor: pointer;
-  border: 2px solid transparent;
+  margin-right: 5px;
+  margin-bottom: 5px;
 }
 
-.itemActive {
+.input:focus + .cnt {
+  border-color: #387cec;
+}
+
+.input:checked + .cnt {
   border-color: #387cec;
 }
-- 
cgit v1.3.1