Question

https://test.terminbuch.eu/massimo/termine

点击“Registrieren”后，右侧会看到一个非常小的复选框。它看起来不像普通的复选框。虽然开发人员工具没有显示复选框的规则，但它非常小。

有什么想法吗？

Answer 1

这是因为您在display: inline-flex课程上使用了.checkbox。为复选框输入元素指定flex属性，它将起作用：

.checkbox-cb {
    margin-right: 8px;
    cursor: pointer;
    flex: 0 0 auto;
}

Answer 2

在width:100px;的第106行和类名framework.css添加.checkbox-cb。它会帮助你。

您需要更改下面列出的课程。

.checkbox-cb {
    margin-right: 8px;
    cursor: pointer;
    width: 40px;
}

Answer 3

这是一个普通的复选框。它在Firefox中是13px x 13px，这是此浏览器的默认复选框大小。我已经隔离了下面的代码，以便您可以在不同的浏览器中使用它：

＆＃13;

.agbCheckbox {
  height: 80px;
  font-size: 11px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-cb {
  margin-right: 8px;
  cursor: pointer;
}

＆＃13;

<div class="agbCheckbox checkbox" id="77">
  <input class="checkbox-cb" id="77-cb" type="checkbox">
  <span class="checkbox-text" id="77-text">Den Inhalt der <a id="agbLink" href="">AGB und Datenschutzerklärung</a> habe ich zur Kenntnis genommen und erkläre mich damit einverstanden.</span>
</div>

＆＃13;

如果您想仅使用CSS更改复选框尺寸，那么SO上有一个很好的主题：Checkbox size in HTML/CSS

为什么Checkbox看起来像那样？

3 个答案: