如何通过CSS使输入框不可见但仍可点击？

Question

有没有办法仅通过CSS使输入单选框不可见？

我有以下布局：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>

如您在示例中所见，单选按钮出现在顶部。我该如何让它出现在后面并可点击，甚至在保持可点击的同时隐藏它？

- gespinha

---

不可见但可点击？你的意思是用某个其他元素触发一个不可见元素的点击事件吗？ - anpsmn

Answer 1

在 input 中添加 opacity: 0 可能是一个开始。不确定浏览器的支持情况，但在最新版本的 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>

- ckuijjer

Answer 2

您可以隐藏输入框，仅显示标签。我对示例进行了一些修改，以便为您提供一个示例：

HTML：

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

CSS（层叠样式表）：

.main {
    position: relative
    display: block;
}
input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

我只复制了修改过的CSS块，其余部分保持不变。

- delCano

---

无法工作，因为在 visibility:hidden 元素上不会触发事件。请参见此未能正常工作的演示：http://jsfiddle.net/t87k5k8u/14/。 - Moob

是的，但是！如果你点击标签，事件就会触发。因此，通过将你的"<div class='main'>"改为"<label class='main'>"，它就可以工作了。 - delCano

哦，是的，你说得对。我的错。抱歉。我会撤销我的负评，但系统不允许我除非你进行编辑。（也许你可以做一个微小的格式更改或其他什么？） - Moob

Answer 3

当然可以。你可以使输入框不可见。

设置

opacity:0;

请查看更新的代码演示。

- Leonidas

Answer 4

使用CSS Opacity。确保它太淡而无法看到，但不是完全透明的，以便浏览器仍然可以呈现它（为了最大限度地提高跨浏览器兼容性）：

opacity:0.02; /* not FULLY transparent */
filter: alpha(opacity=0); /* IE8 and lower */
zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */

演示：http://jsfiddle.net/t87k5k8u/13/

.main {
    position: relative
}
.main > div {
    width: 200px;
    height: 200px;
    background: #f00;
}
input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity:0.02; /* not FULLY transparent */
    filter: alpha(opacity=100); /* IE8 and lower */
    zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}
input:checked + div {
    background: #000
}

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

- Moob

Answer 5

这是我的建议： 示例 Fiddle：http://jsfiddle.net/u0xLkz05/2/

---

对于这个任务，我会在元素中使用for属性，并且由于您正在将

放置在内联元素中，我会稍微更改和简化标记，如下所示。

<fieldset>
    <div>
        <input type="checkbox" id="your-id1" name="..." />
        <label for="your-id1">Your label 1</label> 
    </div>

    <div>
        <input type="checkbox" id="your-id2" name="..." />
        <label for="your-id2">Your label 2</label> 
    </div>

    <div>
        <input type="checkbox" id="your-id3" name="..." />
        <label for="your-id3">Your label 3</label> 
    </div>
</fieldset>

而且 CSS 将是：

fieldset div {
    position: relative;
    width: 100px;
    height: 100px;
    border: 0;
    margin: 10px 0;
}

label {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font: 0/0 a;
    cursor: pointer;
}

input + label { background: red; }
input:checked + label { background: black; }

---

由于定位在absolute中的标签元素，每个单选框元素都变得不可见。您可以更改标签的背景颜色，而不是使用

。

顺便提一下，使用这种方法时，您无需使用额外的空元素，语义得到了改进，并且使用标签元素可以增加表单的可访问性（如果未启用CSS，则会看到所有复选框及其相应的标签）。

- Fabrizio Calderan