2

我正在尝试使用各种自定义复选框输入，但我不太确定所有这些填充来自哪里..

这个想法是显示一个图像来代替带有文本的复选框，当它被选中时，图像的不透明度会降低以在其下方显示一个符号，表明它已被选中。

我把它归结为这个小提琴：http: //jsfiddle.net/tx76J/1/

<li>
    <input id="1" type="checkbox">
    <label for="1">
        <figure>
            <img src="http://www.moderndandies.com/files/images/Asus-smartphone-android.jpg">          
        </figure>
    </label>
</li>​

在此处输入图像描述

4

1 回答 1

8

  • 添加list-style: none;到您的li. 问题是由列表标记引起的，如果您删除黑色背景颜色，您可以看到它（我确定它仅用于演示，但对于未来的访问者：li应该始终只存在于ol或中ul）。

    在此处输入图像描述

  • 此外，设置img为display: block以删除底部的空间。出现这种情况是因为默认情况下图像被认为是内联的（也在这个问题中解释：锚标记底部的空白SO）。

jsFiddle 演示，显示它工作

于 2012-07-09T15:56:16.283 回答