消失的复选框 HTML 标签答案

【问题标题】：Disappearing Checkbox HTML label消失的复选框 HTML 标签
【发布时间】：2016-03-27 01:22:39
【问题描述】：

如果您加载此站点并转到侧面的上传选项卡，您将看到复选框按钮。当您单击它时，它会消失。再次点击网站上的任何地方都会让它重新出现。

由于我不知道问题出在哪里，我无法在此处上传整个网站的代码，所以下面是整个网站的压缩包：

https://www.dropbox.com/sh/ef03jgg3vf8r1i6/AADhHtiUDw5YjPGrezMQxykza?dl=0

或查看代码：

http://www.brunel.ac.uk/~cs13lld/BadNoise/

另一个小问题是输入字段和提交按钮都设置得太宽 100% 他们所在的 div 但您可以看到输入字段在提交按钮的右侧明显更长。

网站已经完成了一半，所以如果有东西丢失，请不要担心。

非常感谢。

【问题讨论】：

标签： html css checkbox web label

【解决方案1】：

所以我猜你是在 chrome 中查看这个。

您的样式表上存在一些导致问题的 CSS：

@media only screen and (min-width: 300px)
input:focus, select:focus, textarea:focus, button:focus {
    -webkit-appearance: none;
    outline: none;
}

只需删除 -webkit-appearance: none;你应该没事。

【讨论】：

谢谢，它确实有效，但你被那里的其他人打败了！关于为什么输入和提交字段都是 100% 但输入字段比提交按钮更远的任何想法？
想通了！ box-sizing：边框框； -moz-box-sizing: 边框;

【解决方案2】：

您需要删除此规则或将其更改为input[type='text']：

@media only screen and (min-width: 300px) {
  input:focus, select:focus, textarea:focus, button:focus {
    -webkit-appearance: none;
    outline: none;
  }
}

【讨论】：

太棒了！是的，那行得通。关于为什么输入和提交字段都是 100% 但输入字段比提交按钮更远的任何想法？