Question

我正在尝试将HTML 5 required复选框集成到表单中：

＆＃13;

<p>
  <input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
  <br>
  <a href="/en/datenschutz.php" target="_blank">
    <u>Privacy  Policy</u>
  </a>
</p>

＆＃13;

它不会在单个浏览器中显示。我以前没有遇到过其他网站的这个问题，这个网站正在运行Bootstrap v2.2.2。

我找到了一些可能无法正常工作的标签解决方案。

Answer 1

您的Style.css文件具有以下规则：

input[type="checkbox"] {
    display: none;
}

删除它，您将看到您的复选框。

如果由于某种原因需要该规则，并且您只想为此特定复选框覆盖它，那么您将必须添加另一个CSS规则来覆盖它。显然，添加内联样式可以完成这项工作，但这可能不是最好的方法：

<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">

Answer 2

你可以同时使用css。但在这里 style =“display：inline-block;” 内部输入类型是覆盖显示：无;

input.checkbox {
    display: inline-block;
}

/*input[type="checkbox"] {
    display: inline-block;
}*/

<p>
  <input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>

<a href="/en/datenschutz.php" target="_blank">
  <u>Privacy  Policy</u>
</a>

Answer 3

您的 style.css 可能包含外观 css 属性。这用于根据操作系统的主题使用平台原生样式显示元素。查找：https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

您的代码可能包含一个 css 规则，例如：

input {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

如果您想保留此属性并专门更改复选框，请使用：

input[type="checkbox"] {
    appearance: checkbox !important;
}

复选框不显示

3 个答案: