::before not affected my width and height

Question

I am currently making a Pricing Template for a client and it involves using check boxes, but I hate the look of the default ones, so I am styling them myself. I have never styled check boxes before but this is how I am attempting to. The codepen is here. My what isn't working starts on line 101 in the HTML and 129 of the CSS. Also I am using SCSS.

I am using ::before to style them and I set the check boxes to have a max-height of 0. The problem is that when I set a width and height for it, it doesn't affect it at all.

Here is the basic 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>

And the CSS:

    section p input[type="checkbox"] {
      max-height: 0px;
    }
    section p input[type="checkbox"]::before {
      content: "ahhhh";
      width: 12px;
      height: 12px;
      background: #555;
    }

So is there something I'm missing? I am fairly new to ::before and ::after, but I think I understand the basics.

Can someone help?

Inputs are void elements. You can't insert content inside them (at all or in a reliable way, depending on the browser). — Oriol, Aug 26 '16 at 02:27

score 0 · Accepted Answer · answered Aug 26 '16 at 02:27

If you're going to set width or height, you need to set your display type to a block, inline-block or any display type that "creates layout".

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>

@TheAndersMan great! Please upvote and mark the question correct if this solved your problem. — Soviut, Aug 26 '16 at 02:51

score 0 · Answer 2 · answered Aug 26 '16 at 02:27

max-height is absolute. If the height goes over max-height, the max-height takes priority.

As per the MDN Docs:

The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

Therefore, by specifying max-height to 0px, the height cannot ever go over 0px, even if explicitly set to something larger.

::before not affected my width and height

2 Answers2