相关疑难解决方法(0)

我希望有一个标准复选框的替代品 - 基本上我想使用图像,当用户点击图像时,淡出它并覆盖一个勾选框.

从本质上讲,我想做一些类似于Recaptcha 2的功能,当它让你点击符合特定标准的图像时.您可以在此处查看Recaptcha演示,但有时可能会让您解决文本问题,而不是图像选择.所以这是一个截图:

当您单击其中一个图像(在这种情况下,包含牛排图片)时,您单击的图像会缩小并显示蓝色勾号,表示您已勾选它.

假设我想重现这个确切的例子.

我意识到我可以有9个隐藏的复选框,并附加一些jQuery,这样当我点击图像时,它会选择/取消选中隐藏的复选框.但是如何缩小图像/覆盖蜱？

好的,所以我在网上通过CSS看到了很多关于样式复选框的解决方案.但是,我正在寻找一些更强大的东西,我想知道是否有人可以提供帮助.基本上,我想要这个解决方案,但能够使用CSS指定的颜色覆盖灰色复选框.我需要这个,因为我会有不可预测数量的不同复选框,每个复选框都需要不同的颜色,我不想创建大量不同的图像来处理这个问题.任何人对如何实现这一点有任何想法？

如何Tick在HTML复选框中使用不同的图形(图像或其他符号)而不是默认标记.

我读了许多SO问题,但不能那样做.当我看到这个问题改变刻度线的颜色和这个.一切都是老问题.但它太复杂了.

有没有简单的方法来做到这一点.我希望现在有一个简单而好的方法吗？

我想用CSS替换带有图像的复选框.您可以在下面的图片中看到我想要达到的目标:

http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2013/03/3.1InActivitySettings-220x376.png

我快到了,但我被卡住了.你可以在这里找到我到目前为止所做的: JSFiddle

HTML

<div data-role="content" class="content">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-iconpos="right">
            <input type="checkbox" name="checkbox-0" id="checkbox-0" class="check" />
            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="check" />
            <input type="checkbox" name="checkbox-2" id="checkbox-2" class="check" />
            <input type="checkbox" name="checkbox-3" id="checkbox-3" class="check" />
            <label for="checkbox-0">15 minutes</label>
            <label for="checkbox-1">30 minutes</label>
            <label for="checkbox-2">45 minutes</label>
            <label for="checkbox-3">60 minutes</label>
        </fieldset>
    </div>
</div>

CSS

.ui-checkbox-on {
    background-image: url(images/checkmark.png);
}

.ui-checkbox-on .ui-icon {
    background-color: rgba(0, 0, 0, 0);
}

.ui-icon-checkbox-off {
    background-image: none;
    box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; 
    border-radius: 0px; -webkit-border-radius: …