Revise checkbox for minor style update: just dark-mode

Steve0Greatness · Feb 3, 2024 · 6765a96 · 6765a96
1 parent f4625b4
commit 6765a96
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/blog-posts/checkbox-custom-styles.md b/blog-posts/checkbox-custom-styles.md
@@ -1,13 +1,13 @@
 ---
 title: Customize an HTML Checkbox
 date: 2022 Feb 19
-updated: 2024 Feb 1
+updated: 2024 Feb 2
 ---
 TL;DR: `appearance: none;`.
 
 Checkboxes are hard to style. But when you're making a website, they may look ugly.
 
-<input type="checkbox" style="appearance: checkbox;" />
+<input type="checkbox" style="all: revert;" />
 
 As you can see here, this bland checkbox does not fit into my clearly great website(/s). But really, it does not fit in at all.
 
@@ -22,7 +22,7 @@ input[type="checkbox"] {
 }
 ```
 
-<iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #fff; border: none"></iframe>
+<iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #000; border: none"></iframe>
 
 Now we can do whatever we want to it. You're also able to add a `:checked` sudo to change certain elements(like the `background-color`) depending on if the checkbox is checked or not.
 
@@ -31,8 +31,8 @@ input[type="checkbox"] {
     appearance: none;
     width: 15px;
     height: 15px;
-    background: #555;
-    border: 1px #252525 solid;
+    background: #000;
+    border: 1px #fff solid;
     border-radius: 2px;
 }
 
@@ -41,4 +41,4 @@ input[type="checkbox"]:checked {
 }
 ```
 
-<iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #fff; border: none"></iframe>
+<iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #000; border: none"></iframe>
diff --git a/static/blog-files/checkbox-custom-styles-ex2.html b/static/blog-files/checkbox-custom-styles-ex2.html
@@ -4,13 +4,14 @@
 <head>
     <style>
         input[type="checkbox"] {
-            appearance:none;
+            appearance: none;
             width: 15px;
             height: 15px;
+            background: #000;
+            border: 1px #fff solid;
             border-radius: 2px;
-            border: 1px #252525 solid;
-            background: #555;
         }
+
         input[type="checkbox"]:checked {
             background: #ce5aff;
         }