Question

我想在复选框的背景上放置一个图像＆amp;我的HTML代码中的单选框，但它不起作用，但它在其他表单属性上工作。

Answer 1

我找到了如何将图片提供给复选框＆amp;带有纯CSS的无线电按钮。

<强> HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

<强> CSS

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type=checkbox]:checked + label {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

选中此项以获取更多http://css-tricks.com/the-checkbox-hack/，

https://gist.github.com/592332

Answer 2

我编写自己的代码来解决此问题。这将是这样的。我现在没有这个代码，但我在SO上写了相同的方法。

<div class="checkbox-wrapper">
<input type="checkbox" name="value"/>
<img src="img/blah.png"/>
</div>

在css中，我们将隐藏此复选框，使它的Z-index小于我在此包装器代码中放置的图像。事件上，当有人点击图像时，它看起来像复选框，并在实际复选框中将被点击。而不是display:none使用opacity: 0会更好。这将在IE6中破解但我们并不关心这一点，因为我不再支持IE6了。

在Javascript中如果您想要一个不同的（但与我的相似）实现，您可以编写事件。您可以使用自己的基于主题的控件替换原生Html Checkbox，Radio并选择（如果您坚持使用Twitter引导程序，则选择2更好）。

Answer 3

将复选框放在div中，并将背景图像放在所述div中。这是一个例子：

<div id="backgrounddiv" style="background-image: url('image.gif');">
<input id="check_box" type="checkbox" />
</div>

是否可以将图像放入input type =“checkbox”？

3 个答案: