luci-theme-openwrt-2020: properly handle invalid checkbox state

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 19 insertions, 2 deletions

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index db2f3bbd5e..36e6b9778f 100644
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -921,8 +921,18 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
 	background: var(--danger-color);
 }
 
+.cbi-checkbox {
+	position: relative;
+}
+
 .cbi-checkbox input[type="checkbox"] {
-	display: none;
+	position: absolute;
+	z-index: 10;
+	-webkit-appearence: button;
+	height: 1.3em;
+	width: 1.3em;
+	opacity: 0;
+	cursor: pointer;
 }
 
 .cbi-checkbox input[type="checkbox"] + label {
@@ -944,7 +954,6 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
 	position: absolute;
 	left: 0;
 	top: 0;
-	cursor: pointer;
 }
 
 .cbi-checkbox input[type="checkbox"]:checked + label::after {
@@ -960,6 +969,14 @@ button[disabled], button.disabled, .btn[disabled], .btn.disabled {
 	cursor: pointer;
 }
 
+.cbi-checkbox input.cbi-input-invalid[type="checkbox"] + label::before {
+	box-shadow: 0 0 2px var(--danger-color);
+}
+
+.cbi-checkbox input.cbi-input-invalid[type="checkbox"]:checked + label::after {
+	background: var(--danger-color);
+}
+
 input:not([type]),
 input[type="text"],
 input[type="password"],