make an input invisible but clickable through CSS?

Question

Is there any way of making an input radio invisible via CSS only?

I've got the following layout: 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>

As you see in the example, the radio is appearing on top. How can I make appear on the back and be clickable or even hide it while letting it be clickable?

Answer 1

Adding opacity: 0 to the input might be a start. Not sure about browser support, but it seems to work on the newest versions of Firefox, Chrome and 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>