不能輸入目標元素：檢查

我有一個形式，這大致是這樣的 -不能輸入目標元素：檢查

<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>

我要的是輸入[類型=「無線電」]由被替換，當選中時，更改元素的背景位置。這裏是我的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; 
}

是不正確的，但我想要做的是改變當輸入「檢查」，不能工作了，我會錯的。我嘗試了>和+，並且無法讓它們工作。

我不太想依賴於jQuery/JavaScript，除了OldIE。

來源

2014-01-20 Stuart Robson

是否選擇申請當你刪除'〜i'？例如：'.task-type-item input：checked {background-color：red; }' – Andy

嗨安迪，不，不。這可能意味着我已經錯誤地將HTML結構化爲技術工作，嗯。謝謝:) –

這裏有一個問題：因爲你的複選框是display:none你實際上不能點擊並檢查它們。你在懸停並點擊i項目，這就是爲什麼你的CSS不起作用。你可能不得不依靠JavaScript來做到這一點。編輯：忘記以上。代碼中的幾件事情是錯誤的：標記的for屬性應該等於相關元素的id屬性，以將它們綁定在一起。或者不使用id可言，因爲目標radio被封閉在它自己的label： http://www.w3schools.com/tags/tag_label.asp

二：選擇應該是

檢查工作的解決方案在這裏：http://codepen.io/lucianodinapoli/pen/vwqKH

來源

2014-01-20 15:34:19 Luciano

根據http://css-tricks.com/almanac/selectors/c/checked/：檢查應該在隱藏的表單元素上工作。 – Andy

不能輸入目標元素<i>：檢查

回答

不能輸入目標元素<i>：檢查

回答

相關問題