не может предназначаться элемент <i> с входом: проверено

Question

У меня есть форма, что это примерно так -

<form action="#"> 
    <ul class="task-type-options"> 
    <li class="task-type-item"> 
     <label for="name-type"><input type="radio" name="task-type"> 
     <i class="radio-button"></i> 
     Thing1 - 
     <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> 
     </label> 
    </li> 
    <li class="task-type-item"> 
     <label for="name-type"><input type="radio" name="task-type"> 
     <i class="radio-button"></i> 
     Thing2 - 
     <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> 
     </label> 
    </li> 
    </ul> 
</form> 

То, что я хочу для ввода [тип = «Радио»] быть заменен <i>, а при проверке измените фоновое положение элемента <i>. Вот мой CSS

.task-type-item { 
     width: 100%; 
     list-style: none; 
    } 
    .task-type-item input[type="radio"] { 
     display: none; 
    } 
    .task-type-item i { 
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAARCAMAAABHG2QlAAAAaVBMVEUAAADLycnLycnMysrMysrNy8vMysrMysrNy8vOzMzMysrMysrOzMzOzMzW1dRBo7VPqbqZy9Oay9Sby9Sv1dvLycnL29vL4eTMysrOzMzW1dTb29vm5eTq6ejq7+/v7u3w7+7y8fD19PPhisAsAAAAD3RSTlMAEB9oeZKmudDV9fb4+fmSK74iAAAA6klEQVQoU52T2RKDIAxFEa244NaKjYqi/v9HNhFLtTN9KPdF5syJIYKMYYIozVSWRgE7woUEBVLwnyDMS21Wo8s8tCCGYaQMEDuwGw7cimmzmYobgaQf3+kTC5xhQVgs2ztLgZ3iTwkWxQROBoEgn7ZPpjzgsMvto92fwDmQMSOYyQDOonI7p4wEzdLVVVXVHc0kxID8uYMnrgbBUn2p0amkt5OBDi2lRGM+AHbSkmXmUmMy2lpb2dD2ANBwAA1gar3UrEqhdz+UBteKDAfI8OrjM4/Pd/t5Ps33+TTufHzugdd987rXf/8/L4tZRR+ZOT5PAAAAAElFTkSuQmCC"); 
     background-repeat: no-repeat; 
     display: block; 
     height: 17px; 
     margin: 0 8px 0 0; 
     width: 17px; 
    } 
    .task-type-item:hover i { 
     background-position: -17px 0; 
    } 
    .task-type-item input:checked ~ i { 
     background-position: -34px 0; 
    } 

    i { 
     display: block; 
    } 

    label { 
     display: block; 
    } 

Я знаю эту линию

.task-type-item input:checked ~ i { 
    background-position: -34px 0; 
} 

не правильно, но то, что я хочу сделать, это изменить <i>, когда вход «проверено» и не может работать, где я Я ошибаюсь. Я пробовал> и + и не могу заставить их работать.

Я действительно не хочу полагаться на jQuery/JavaScript для этого, кроме OldIE.

Answer 1

Здесь есть одна проблема: потому что ваши флажки display:none, вы на самом деле не можете щелкнуть и проверить их. Вы нависаете и нажимаете на элемент i, поэтому ваш CSS не работает. Для этого вам, возможно, придется полагаться на javascript.

EDIT: Забудьте выше. Пара неправильных действий в вашем коде: Атрибут for для тега должен быть равен атрибуту id связанного элемента, чтобы связать их вместе. Или не использовать id вообще, так как цель radio заключена в его собственной label: http://www.w3schools.com/tags/tag_label.asp

Второе: селектор должен быть .task-type-item input:checked ~ i

проверка рабочего раствора здесь: http://codepen.io/lucianodinapoli/pen/vwqKH