为什么复选框看起来像这样？

-1

https://test.terminbuch.eu/massimo/termine 为什么复选框看起来像这样？

单击“Registrieren”后，右侧显示一个非常小的复选框。它看起来不像普通的复选框。尽管开发工具显示复选框没有规则，但它非常小巧。

任何想法？

来源

2016-08-04 aeroncy

问题要求我们建议，查找或推荐一本书，工具，软件库，插件，教程，解释技术或提供任何其他异地资源，都是偏离主题的堆栈溢出堆栈溢出 –

add width:100px; in framework.css at line number 106 and class name .checkbox-cb。它会帮助你。

您需要更改以下列出的类别。

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

来源

2016-08-04 16:08:38

这是因为你在.checkbox类使用display: inline-flex。为复选框输入元素指定一个flex属性，它将起作用：

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

来源

2016-08-04 16:15:35 andreas

不错，非常感谢！ – aeroncy

你是对的！我甚至没有注意到'inline-flex'，因为在这种情况下使用flexbox没有任何意义... – Pipo

这是一个普通的复选框。在Firefox中这是13px x 13px，这是此浏览器的默认复选框大小。我已经分离出下面的代码，这样就可以在不同的浏览器与它玩：

.agbCheckbox { 
 
    height: 80px; 
 
    font-size: 11px; 
 
} 
 

 
.checkbox { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    cursor: pointer; 
 
} 
 

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

<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>

如果你想只用CSS来改变大小复选框这里有一个很好的话题上SO ：Checkbox size in HTML/CSS

来源

2016-08-04 16:18:00 Pipo

我认为它不会重现该问题，因为复选框不像他那样小网站... – andreas

为什么复选框看起来像这样？

回答

相关问题