css复选框如何破解工作?

时间:2015-04-29 17:12:02

标签: html css css3 checkbox

我刚刚遇到了仅使用css创建的切换切换按钮。它被称为复选框hack。

对于那些不知道复选框css hack是什么的人,请在此处阅读

https://css-tricks.com/the-checkbox-hack/

我试了一下,它工作得非常好。但我不明白这是如何工作的,因为我们没有点击复选框。

所以我有两个问题

  1. 这是如何工作的?

  2. 我用display: none;尝试了它而不是绝对定位 它仍然奏效。这种方法有什么缺点吗?

2 个答案:

答案 0 :(得分:1)

  1. 您可以使用label属性将checkboxes绑定到radios / for=。设置此项后,单击标签可切换复选框。这是standard HTML attribute

  2. 您可以使用display:none隐藏该复选框,但请对其进行测试以确保其值仍然随表单一起提交。

答案 1 :(得分:0)

除了 visibility: hidden; 之外,您还可以使用 opacity: 0;display: none; 隐藏复选框,但我不确定哪个更好。