是否可以将图像放入输入类型=“复选框”？

我想在我的html代码的复选框&无线电框的背景上放置一个图像，但它不起作用，但它在其他窗体属性上工作。是否可以将图像放入输入类型=“复选框”？

2011-01-25 sandeep

我认为它不可能，你可以尝试一些JavaScript + CSS的工作。例如：http：//www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements – KishoreK 2011-01-25 05:24:23

如果您提供的是至少一些与您遇到问题相关的代码。 – 2011-01-25 05:24:43

我发现如何复选框 & 单选按钮用纯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

来源

2012-04-13 05:53:02 sandeep

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

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

来源

2011-01-25 05:42:57 Fibericon

我写我自己的代码来解决这个问题。这会像这样工作。我现在没有这个代码，但是我在SO上写同样的方法。

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

在CSS中，我们将隐藏此复选框以使它的Z-指数不到，我把这个包装代码内的图像。事实上，当有人点击图片时，它看起来像复选框，并在真正的复选框将被点击。而不是display:none使用opacity: 0会更好。这将在IE6中打破，但我们并不关心这一点，因为我不再支持IE6。

在JavaScript中如果你想要一个不同的（但类似于我的）实现，你可以编写事件。您可以使用自己的基于主题的控件替换原生Html Checkbox，Radio并选择（select2更适合使用Twitter引导程序）。

来源

2014-02-28 05:30:41 Adrian

是否可以将图像放入输入类型=“复选框”？

回答

相关问题