jeudi 18 août 2016

Checkboxes not working

I'm trying to create a checklist but only the first checkbox is working. When I click on the other ones it checks the first box. Also, I added "text-decoration: line-through;" but it's not showing up in the text. I'm pretty sure I can fix that with HTML though.

http://ift.tt/2bBELAF

Here's my code:

    <div class="box">
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> get an army
      <br>
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> free the slaves
      <br>
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> train my dragons
      <br>
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> cross the narrow sea
      <br>
    <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> become Queen of Westeros
    </div>

<style>
    input[type=checkbox] {
    display:none;
    }
    input[type=checkbox] + label
    {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
    }
    input[type=checkbox]:checked + label
    {
    background: #0080FF;
    text-decoration: line-through;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
    }

</style>




Aucun commentaire:

Enregistrer un commentaire