css - 无法使用输入 :checked 定位元素 <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>

我想要的是将 input[type="radio"] 替换为 <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>当输入被“检查”并且无法确定我要去哪里时。我试过 > 和 + 也不能让它们工作。

除了 OldIE，我真的不想为此依赖 jQuery/JavaScript。

Answer 1

这里有一个问题:因为您的复选框是display:none，您实际上无法点击并选中它们。您将鼠标悬停并单击 i 元素，这就是您的 CSS 无法正常工作的原因。为此，您可能必须依赖 javascript。

编辑: 忘记上面的。您的代码中有几处错误: 标签的 for 属性应该等于相关元素的 id 属性以将它们绑定(bind)在一起。或者根本不使用 id，因为目标 radio 包含在它自己的 label 中: http://www.w3schools.com/tags/tag_label.asp

第二:选择器应该是.task-type-item input:checked ~ i

在此处检查工作解决方案:http://codepen.io/lucianodinapoli/pen/vwqKH