Added source code for the 2 examples on Checkbox custom; better spacing on |

blog-posts/checkbox-custom-styles.md

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

                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                                background-color: grey;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                        <br />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            24  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                            <iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #000; border: none"></iframe>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                        <a href="/blog-files/checkbox-custom-styles-ex1.txt">View Source</a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            27  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                            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.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -39,5 +41,7 @@ input[type="checkbox"]:checked {

                                
                                
                                
                            
                                
                                    
                                        
                                            41  
                                                background: #ce5aff;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                            ```
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                        <br />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            45  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            46  
                                            <iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #000; border: none"></iframe>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                        <a href="/blog-files/checkbox-custom-styles-ex2.html">View Source</a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/blog-files/checkbox-custom-styles-ex1.txt

@@ -0,0 +1,19 @@

                                
                                
                                
                            
                                
                                    
                                        1 +
                                        <!DOCTYPE html>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        2 +
                                        <html>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        3 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                        <head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                            <style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                input[type="checkbox"] {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                    appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                    width: 15px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                                    height: 15px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                                    background-color: grey;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                                }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                            </style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        </head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                        <body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                            <input type="checkbox" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                        </body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                        </html>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

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

@@ -0,0 +1,25 @@

                                
                                
                                
                            
                                
                                    
                                        1 +
                                        <!DOCTYPE html>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        2 +
                                        <html>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        3 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                        <head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                            <style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                input[type="checkbox"] {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                    appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                    width: 15px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                                    height: 15px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                                    background: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                                    border: 1px #fff solid;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                                    border-radius: 2px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                                }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                                
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                                input[type="checkbox"]:checked {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                                    background: #ce5aff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                                }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                            </style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                        </head>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                        <body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                            <input type="checkbox" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                        </body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                        </html>