您好,我正在尝试为我的网站创建一个自定义复选框,如提供的图像链接。这样做的最佳方法是什么? 非常感谢。
有一个 CSS 技巧,它的实际工作原理是隐藏复选框(或单选框),定义一个作为视觉表示的标签(在所有相关浏览器中将打开/关闭复选框),并使用
:checked
和 +
选择器。
这只是一个简单的例子:
.foscheck input { display: none; }
.foscheck label { display: block; width: 20px; height: 20px; background: red; }
.foscheck input:checked + label { background: blue; }
<div class="foscheck">
<input type="checkbox" id="fos1" />
<label for="fos1"></label>
</div>
注意: 为了便于访问,您应该在
label
中添加一些描述复选框的文本。我只是想说明一下效果。
jQuery 是你最好的选择,这是一个复选框插件,但有数百个,所以其他东西可能更适合你。只需谷歌“jquery 自定义复选框”即可。