是否可以將圖像放入輸入類型=「複選框」？

我想在我的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

是否可以將圖像放入輸入類型=「複選框」？

回答

相關問題