Question

我目前正在为客户制作定价模板，它涉及使用复选框，但我讨厌默认的外观，所以我自己设计样式。我之前从未设置过复选框，但这就是我的尝试方式。 codepen是here.我的工作开始于HTML的第101行和CSS的129。我也在使用SCSS。

我正在使用::之前设置它们的样式并设置复选框以使最大高度为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相当新，但我认为我理解基础知识。

有人可以帮忙吗？

Answer 1

如果您要设置width或height，则需要将display类型设置为block，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>

Answer 2

max-height是绝对的。如果height超过max-height，则max-height优先。

根据MDN Docs：

max-height属性用于设置元素的最大高度。它可以防止height属性的使用值变得大于为max-height指定的值。

因此，通过将max-height指定为0px，高度不能超过0px，即使明确设置为更大的值。

::之前没有影响我的宽度和高度

2 个答案: