:: vorher nicht betroffen meine Breite und Höhe

Question

Ich mache derzeit eine Preisgestaltung für einen Kunden und es beinhaltet die Verwendung von Kontrollkästchen, aber ich hasse das Aussehen der Standard, also style ich sie selbst. Ich habe noch nie Kontrollkästchen aktiviert, aber so versuche ich es. Der Codepegel ist here. Mein was nicht funktioniert beginnt auf Zeile 101 in der HTML und 129 der CSS. Auch ich benutze SCSS.

Ich verwende :: vor, um sie zu stylen, und ich setze die Kontrollkästchen auf eine maximale Höhe von 0. Das Problem ist, dass, wenn ich eine Breite und Höhe für sie festlegen, es überhaupt nicht beeinflusst . Hier

ist die grundlegende 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> 

Und die CSS:

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

So gibt es etwas, was ich vermisst habe? Ich bin ziemlich neu zu :: vor und :: nach, aber ich denke, ich verstehe die Grundlagen.

Kann jemand helfen?

Answer 1

Wenn du gehst width oder height zu setzen, müssen Sie Ihren display Typen einen block, inline-block oder jeden Anzeigetyp festgelegt, dass „schafft 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>

Answer 2

max-height ist absolut. Wenn die height über max-height geht, hat die max-height Priorität.

Gemäß der MDN Docs:

Die max-height Eigenschaft wird verwendet, um die maximale Höhe eines Elements einzustellen. Es verhindert, dass der verwendete Wert der Eigenschaft height größer als der für max-height angegebene Wert wird.

daher durch max-height Angabe über 0px 0px auf, kann die Höhe nicht immer gehen, auch wenn explizit größer etwas gesetzt.