html - 通过 CSS 使输入不可见但可点击？

Question

有什么方法可以仅通过 CSS 使 input radio 不可见吗？

我有以下布局:http://jsfiddle.net/t87k5k8u/2/

<label class="main">
    <input name="rad-1" type="radio" checked=""/>
    <div></div>
</label>
<label class="main">
    <input name="rad-1" type="radio" />
    <div></div>
</label>
<label class="main">
    <input name="rad-1" type="radio" />
    <div></div>
</label>

如您在示例中所见， radio 显示在顶部。我怎样才能使它出现在背面并且可以点击，或者甚至隐藏它同时让它可以点击？

Answer 1

将 opacity: 0 添加到 input 可能是一个开始。不确定浏览器支持，但它似乎适用于最新版本的 Firefox、Chrome 和 Safari。

.main {
    position: relative
}
.main > div {
    width: 200px;
    height: 200px;
    background: #f00;
}
input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
input:checked + div {
    background: #000
}

<div class="main">
    <input type="checkbox" />
    <div></div>
</div>