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

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

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

I've got the following layout: http://jsfiddle.net/t87k5k8u/2/

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

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

5 个解决方案

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

添加不透明度:输入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>

#2

You can also hide the input and only show a label. I modified a couple of things from the fiddle to give you an example:

您还可以隐藏输入并仅显示标签。我从小提琴中修改了一些东西,给你一个例子:

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

I have only copied the modified CSS blocks, the rest remain unchanged.

我只复制了修改后的CSS块,其余的保持不变。

#3

Sure. You can make the input go invisible.

当然。您可以使输入不可见。

Set

opacity:0;

Check the updated fiddle.

检查更新的小提琴。

#4

Use CSS Opacity. Make sure its too faint to be seen but not actually fully transparent so that the browser still renders it (for maximum x-browser compatibility):

使用CSS不透明度。确保它太微弱而不能被看到但实际上并不完全透明,以便浏览器仍然呈现它(为了最大的x浏览器兼容性):

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

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

#5

Here's my proposal:

这是我的建议:

Example fiddle: http://jsfiddle.net/u0xLkz05/2/

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

For this task I would use the for attribute in the label elements and, since you're placing a div inside an inline element, I would slightly change and simplify the markup like so

对于这个任务,我会在标签元素中使用for属性,因为你将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>

and the CSS would be

而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; }

Each radio element becomes not visible due to the label element which is positioned in absolute. Instead of a div you could change the background colour of the label.

由于标签元素位于绝对位置,每个无线电元素变得不可见。您可以更改标签的背景颜色,而不是div。

As a side note with this approach you don't need to use an extra empty element, the semantic is improved and the use of label elements increases the accessibility of your form (without CSS enabled you would see all the checkboxes with theirs associated label aside)

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

#1