make bullet clickable even when display:none
===

I am trying to make a custom bullet list with css3. When a list item is selected, I just want to change the list item color. I do not want the bullet point to be shown. If I hide (display:none) the bullet point, I no longer can click on anything.

    <ul>
    <li><input id="a" type="radio" name="stuff"/><label for="a">tree</label></li>
    <li><input id="b" type="radio" name="stuff"/><label for="b">boat</label></li>
    </ul>
    
    
     input[type="radio"] 
    {
       display:none;
    }
    
    input[type="radio"]:checked+label
    {  
    background-color:#86A6C6;
    }
    
    li
    {
    background: #5C87B2;
    color: #FFFFFF;
    display: block;
    }
    
    li label
    { 
    position:relative;
    padding:5px;
    display: block;
    }

