<分区>
<分区>
我目前正在为客户制作一个定价模板，它涉及使用复选框，但我讨厌默认的外观，所以我自己设计了它们。我以前从未设置过复选框样式，但这就是我尝试的方式。代码笔是 here.我的不工作从 HTML 的第 101 行和 CSS 的第 129 行开始。我也在使用 SCSS。
我正在使用::before 来设置它们的样式，并将复选框的最大高度设置为 0。问题是，当我为其设置宽度和高度时，它根本不会影响它。
这是基本的 HTML:
<div class="cellBottom cell alaCart">
<section>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
</section>
</div>
还有 CSS:
section p input[type="checkbox"] {
max-height: 0px;
}
section p input[type="checkbox"]::before {
content: "ahhhh";
width: 12px;
height: 12px;
background: #555;
}
那么我缺少什么吗？我对::before 和::after 还很陌生，但我想我了解基础知识。
有人可以帮忙吗？
最佳答案
如果您要设置宽度或高度，您需要将显示类型设置为 block code>、inline-block 或任何“创建布局”的显示类型。
section p input[type="checkbox"] {
max-height: 0px;
}
section p input[type="checkbox"]::before {
content: "ahhhh";
display: inline-block;
background: #555;
} <div class="cellBottom cell alaCart">
<section>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
<p><input type="checkbox" />Lorem ipsum</p>
</section>
</div>关于javascript -::之前不影响我的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39157436/