Question

我在引导程序4中创建了一个带有条纹行的表。其中一个表列具有html复选框。

如果您在Google Chrome上打开它，则背景颜色较深的行中的默认复选框的大小要小于白色背景，而在Microsoft Edge或Opera Mini上打开时，它们的外观相同尺寸。有什么不同或只是我的错觉？这是Edge或Chrome上的错误，还是可以在所有浏览器中实现一致的行为？

当所有行具有相同的背景色时，不会观察到上述行为。

此外，一种解决方法可能是使用创建一个自定义复选框，如同一小提琴所示。

我只有

<some code>
<tr class="bg-primary">
<td>
      <input type="checkbox" id="Check1">
</td>
</tr>
<tr>
<td>
      <input type="checkbox" id="Check2">
</td>
</tr>
<some code>

Answer 1

这就是颜色和眼睛如何工作的全部。明亮的颜色看起来总是比黑暗的颜色大。

在Chrome中，本机复选框比Opera和Edges的复选框暗。

因此，如果您在Chrome的深色背景中查看本机复选框，则它们看起来会更小。在白色背景下，它们会显得更好。

除此之外，您还具有边框颜色，它看起来像背景，因此略微掩盖了

。

复选框的大小相同。

Answer 2

这实际上是CSS本身的问题，不允许在复选框上进行个性化设置（与文件共享相同的问题）。因此，每个浏览器都有自己的复选框显示，而没有任何“干净的”解决方案来对其进行标准化。

因此有一个“肮脏”的解决方案：

将复选框设置为不可见
创建具有2个外观（选中和未选中）的按钮
使用JS启用和禁用点击复选框

使用此按钮，您将有一个按钮（在视觉上）与JS一起充当复选框，并引导您在表单中使用的实际复选框。

Answer 3

我认为这是因为在第一个表格行元素中您包括了一个在背景中更改颜色的类，也许是一种错觉，使您感觉其中一个复选框比另一个复选框更大。

尝试在该类中都包含该类，或在这两个类上都删除，例如：

DSUM

为什么复选框大小在Chrome浏览器中看起来有所不同，但在Edge中却相同？

3 个答案: