Question

有没有办法只通过CSS使输入无线电不可见？

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

正如您在示例中看到的那样，收音机出现在顶部。如何在背面显示并可点击甚至隐藏它，同时让它可以点击？

Answer 1

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

＆＃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;
}
input:checked + div {
    background: #000
}

＆＃13;

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

＆＃13;

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块，其余的保持不变。

Answer 3

不确定。您可以使输入不可见。

设置

opacity:0;

检查更新后的fiddle。

Answer 4

使用CSS Opacity。确保它太模糊，但实际上并不完全透明，以便浏览器仍然呈现它（为了最大限度地兼容x-browser）：

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/

＆＃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
}

＆＃13;

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

＆＃13;

Answer 5

这是我的建议：

示例小提琴：http://jsfiddle.net/u0xLkz05/2/

对于此任务，我将使用for元素中的label属性，因为您在内联元素中放置div，我会略微更改并简化标记像这样

<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的标签元素，每个无线电元素都不可见。您可以更改标签的背景颜色而不是div。

作为这种方法的旁注，您不需要使用额外的空元素，语义得到改进，标签元素的使用增加了表单的可访问性（如果没有启用CSS，您将看到所有带有他们的复选框）相关标签除外）

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

5 个答案: