Centering and remembering checkboxes

Question

First of all Merry Christmas to everyone!

I wrote just now a simple page for 2015 reading challenge. I have few problems.

I think i'm not centering the content in the best way
I want the value of the checkbox to be remembered (if its checked)
if something is checked the label next to it to be striked out

I will appreciate any help for the code and if you have the time to explain what i'm doing wrong so i can improve.

This is my code:

body {
 background-color: #f8f5ee;
 color: #000305;
 font-size: 87.5%;
 font-family: Tahoma;
 text-align: left;
}

a {
 text-decoration: none;
 color: #fc5c5c;
}


#body {
 margin: 0 auto;
 width: 70%;
 clear: both;
}

img {
 display:block;
  margin-left:auto;
  margin-right:auto;
}
.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.content {
    width: 100%;
    float: left;
    padding-left: 15%;
}

.leftcontent {

 
 width: 25%;
 float: left;
 }

.rightcontent {

 
 width: 35%;
 float: left;
}
.mainfooter {
 width: 100%;
    padding-left: 40%;
    float: left;
}

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 18px;  
   font-family: Times New Roman;
    color: #201f1d;
}  



label:before {  
    content: "";  
    display: inline-block;  
     width: 16px;  
    height: 16px;  
    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}  

input[type=checkbox] {  
    display: none;  
}

.checkbox label:before {  
    border-radius: 3px;  
}  

input[type=checkbox]:checked + label:before {  
    content: "\2713";  
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 15px;  
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="assets/css/main.css">
 <title>215 Reading Challenge</title>
</head>
<body id="body">
 
  <img src="http://s11.postimg.org/sdorw4vlf/logo.jpg" alt="2015 Reading Challenge logo">
  
 
 <div class="mainContent">
  <div class="content">
  <header>
    <h2><a href="#" title="Valentina's Challenge">My Challenge</a></h2>
    </header>
   <article class="leftcontent">
    
    <content>
     <div class="checkbox">  
         <input id="check1" type="checkbox" name="check" value="check1">  
         <label for="check1">A book with more than 500 pages</label>  
        
         <br>  
         <input id="check2" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check2">A classic romance</label>  
          <br>
         <input id="check3" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check3">A book that became a movie</label>  
     
         <br>  
          <input id="check4" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check4">A book published this year</label>  
     
         <br> 
         <input id="check5" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check5">A book written by someone under 30</label>
        
         <br> 
         <input id="check6" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check6">A book with nonhuman characters</label>  
        
         <br> 
         <input id="check7" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check7">A funny book</label>  
       
      <br>
      <input id="check8" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check8">A book by female author</label>  
        
         <br>  
          <input id="check9" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check9">A mystery or thriller</label>  
     
         <br> 
         <input id="check10" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check10">A book with a one-word title</label>  
     
         <br>
         <input id="check11" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check11">A book of short stories</label>  
         
         <br> 
        <input id="check12" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check12">A book set in different country</label>  
          
         <br> 
         <input id="check13" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check13">A nonfiction book</label>  
       
         <br> 
         <input id="check14" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check14">A popular author's first book</label>  
       
         <br> 
         <input id="check15" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check15">A book from an author you love that you haven't read yet</label>  
       
         <br> 
         <input id="check16" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check16">A book a friend recommended</label>  
      
         <br> 
         <input id="check17" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check17">A Pulitzer Prize-winning book</label>  
       
         <br> 
         <input id="check18" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check18">A book at the bottom of your to-read list</label>  
       
         <br> 
         <input id="check19" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check19">A book your mom loves</label>  
       
         <br> 
         <input id="check20" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check20">A book that scares you</label>  
        
         <br> 
         <input id="check21" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check21">A book more than 100 years old</label>  
       
         <br> 
         <input id="check22" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check22">A book based entirely on its cover</label>  
     
         <br> 
         <input id="check23" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check23">A book you were supposed to read in school but didn't</label>  
     
         <br> 
      <input id="check24" type="checkbox" name="check" value="check3" checked="checked">  
         <label for="check24">A memoir</label>
         <br> 
     </div>  
    </content>
   </article>
   <article class="rightcontent">
    <content>
     <input id="check25" type="checkbox" name="check" value="check2" checked="checked">  
    <label for="check25">A book you can finish in a day</label>  
     <br> 
    <input id="check50" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check50">A book with antonyms in the title</label>
     <br> 
       <input id="check51" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check51">A book set somewhere you've always wanted to visit</label>  
     <br> 
       <input id="check52" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check52">A book that came out the year you were born</label>  
     <br> 
     <input id="check27" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check27">A book with bad reviews</label> 
     <br> 
     <input id="check28" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check28">A trilogy</label>  
    <br>
       <input id="check29" type="checkbox" name="check" value="check4" checked="checked"> 
    <label for="check29">A book from your childhood</label> 
     <br> 
      <input id="check30" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check30">A book with a love triangle</label> 
     <br> 
       <input id="check31" type="checkbox" name="check" value="check4" >  
    <label for="check31">A book set in the future</label>
     <br> 
        <input id="check32" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check32">A book set in high school</label>  
     <br> 
    <input id="check33" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check33">A book with color in the title</label>  
     <br> 
     <input id="check34" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check34">A book that made you cry</label>
      <br> 
      <input id="check35" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check35">A book with magic</label>  
      <br> 
      <input id="check36" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check36">A graphic novel</label>  
     <br> 
       <input id="check37" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check37">A book by an author you've never read before</label> 
       <br> 
       <input id="check38" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check38">A book you own but have never read</label>  
      <br> 
      <input id="check39" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check39">A book that was originally written in a different language</label>  
      <br>
      <input id="check40" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check40">A book set during Christmas</label>  
     <br> 
      <input id="check41" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check41">A book written by an author with your same initials</label>  
    <br> 
    <input id="check42" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check42">A play</label>  
    <br> 
    <input id="check43" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check43">A banned book</label>  
    <br> 
    <input id="check44" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check44">A book based on or turned into a TV show</label><br> 
    <input id="check45" type="checkbox" name="check" value="check4" checked="checked">  
    <label for="check45">A book you started but never finished</label>  
    <br> 
    </content>
   </article>
  
  </div>
 
 <footer class="mainfooter">
  <p>Copyright &copy; 2015 <a href="#">Reading Challenge</a>
 </footer>
</body>
</html>

Best wishes!

By "remembering" do you mean the user should see the checkboxes in the same state as modified by the user earlier? — Rahul Desai, Dec 30 '14 at 14:30

score 0 · Answer 1 · edited May 23 '17 at 10:26

I have few problems.

I think i'm not centering the content in the best way I want the value

of the checkbox to be remembered (if its checked) if something is

checked the label next to it to be striked out

Demo Fiddle: http://jsfiddle.net/abhitalks/79pe1j08/1/

First, can be solved by removing the float and adding a margin: 0 auto on your .rightcontent:

.rightcontent {
    width: 35%;
    margin: 0 auto;
}

Third, can be solved by adding a combinator on label just like you used for label:before:

input[type=checkbox]:checked + label { 
    text-decoration: line-through;
}

Second, cannot be done using only CSS. You would need Javacript to save/load cookies. Creating and retrieving cookies would be too broad for this answer. To avoid dupe, I would like to point you towards this question: How do I create and read a value from cookie?

Hope that helps.

Centering and remembering checkboxes

1 Answers1