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>

我想要的是输入[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>，并且无法解决我出错的地方。我试过＆gt;和+也无法让他们工作。

除了OldIE之外，我真的不想依赖jQuery / JavaScript。

Answer 1

这里有一个问题：因为您的复选框是display:none，实际上您无法点击并检查它们。你正在徘徊并点击i项，这就是你的CSS无法正常工作的原因。你可能不得不依赖javascript。

编辑：忘了以上。您的代码中出现了一些错误：标记的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

无法使用input：checked </i>定位元素<i>

1 个答案: