Revise checkbox for minor style update: just dark-mode

blog-posts/checkbox-custom-styles.md

@@ -1,13 +1,13 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            1  
                                            ---
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            title: Customize an HTML Checkbox
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            date: 2022 Feb 19
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 -
                                        updated: 2024 Feb 1
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                        updated: 2024 Feb 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                            ---
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                            TL;DR: `appearance: none;`.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                            Checkboxes are hard to style. But when you're making a website, they may look ugly.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 -
                                        <input type="checkbox" style="appearance: checkbox;" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                        <input type="checkbox" style="all: revert;" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            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.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -22,7 +22,7 @@ input[type="checkbox"] {

                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            24  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 -
                                        <iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #fff; border: none"></iframe>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                        <iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #000; border: none"></iframe>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            27  
                                            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.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -31,8 +31,8 @@ input[type="checkbox"] {

                                
                                
                                
                            
                                
                                    
                                        
                                            31  
                                                appearance: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            32  
                                                width: 15px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            33  
                                                height: 15px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 -
                                            background: #555;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 -
                                            border: 1px #252525 solid;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                            background: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                            border: 1px #fff solid;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            36  
                                                border-radius: 2px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            37  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -41,4 +41,4 @@ input[type="checkbox"]:checked {

                                
                                
                                
                            
                                
                                    
                                        
                                            41  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 -
                                        <iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #fff; border: none"></iframe>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                        <iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #000; border: none"></iframe>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/blog-files/checkbox-custom-styles-ex2.html

@@ -4,13 +4,14 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                            <head>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                                <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                                    input[type="checkbox"] {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 -
                                                    appearance:none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                    appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                                        width: 15px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                                        height: 15px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                                    background: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                                    border: 1px #fff solid;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                                        border-radius: 2px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 -
                                                    border: 1px #252525 solid;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 -
                                                    background: #555;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                                
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                                    input[type="checkbox"]:checked {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                        background: #ce5aff;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                                    }