Align checkbox inside a card


New Member
I'm using materializecss, and i'm trying to align a checkbox into a card:
<div id="email-list" class="col s10 m8 l8 card-panel z-depth-1">
   <ul class="collection">
      <li class="collection-item avatar email-unread">
         <input type="checkbox" />
         <div class="mail-card-el">
            <span class="circle red lighten-1">A</span>
            <span class="email-title">Test card</span>
            <p class="truncate grey-text ultra-small">Summer sale is now going on.</p>
            <a href="#!" class="secondary-content email-time">
            <span class="blue-text ultra-small">12:10 am</span>
The problem, I think, is that the element "circle" is doing something that affects the checkbox, causing to don't show
#email-list .collection .collection-item.avatar .circle {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    left: 15px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 300;
    padding: 10px;
I want to achieve something like this:


I was trying to "play" with the positions of the elements and i got nothing, what I'm doing wrong?
Here is my CodePen


Thành viên BQT
As far as I can see it, it's nothing wrong with your CSS. However, the materialize.min.css sets the opacity to 0.

This is, because Materialize uses custom checkboxes (like bootstrap) and you can't just put a default HTML-Checkbox in your Code.

First of all you should import the JS-Files:

Now, instead of just typing: <input type="checkbox" />, you need to wrap your checkbox in <label>-Tags. After your checkbox follows a <span>-Tag.

Replace your checkbox with

   <input type="checkbox" />
   <span><!--Text inside here is optional--></span>
and implement the JS-File. Here is my updated pen:

Edit: A guide and documentation can be found on their website.