如何在html中将图像用作复选框 [英] How To Use Image As A CheckBox in html

问题描述

我参与了公交订票网站项目的制定.我需要用座位来预定.因此，我们可以用图像替换复选框吗?如果可能的话，请告诉我.或者，如果还有其他可能性，请给我提供一些想法.thnku.

I'm involved in making bus booking sites project. I need to use the seats to book. So, can we replace checkbox with the image. If Possible, please tell me. Or, if there is any other possibility, please furnish me with ideas. Thnku.

推荐答案

为CSS提供简单的解决方案 DEMO

offer a simple solution to css DEMO

HTML

<input type="checkbox" id="checkbox-id" /> <label for="checkbox-id">Some label</label>

CSS

input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
input[type="checkbox"] + label {
    background: url(http://xandeadx.ru/examples/styling-checkbox/checkbox-sprite.gif) 0 0 no-repeat;
    padding-left: 20px;
}
input[type="checkbox"]:checked + label {
    background-position: 0 -32px;
}

这篇关于如何在html中将图像用作复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！