CSS checkboxes with slanted labels

user_7521901 0
Viewed 177

I've been trying to achieve checkboxes with slanted text like the image below (where some level of overlapping is necessary):

checkboxes with slanted text

With using the transform styling and setting margins I have been able to get the text to be at the same vertical level, however I am having issues offsetting the elements horizontally so that they appear beside each other.

(this is inside a dynamic table where the rows will be duplicated, which is why I used "span" instead of "label for" to avoid the complications with generating unique id's for all checkboxes)

table tbody {
  display: block;
}

.angled_text {
  display: block;
  margin-top: -18px;
  transform:         rotate(-45deg);

  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<body>
  <table id="dynamic_table">
    <tbody>
      <tr>
        <td>
          <span class="angled_text">Monday</span>
          <span class="angled_text">Tuesday</span>
          <span class="angled_text">Wednesday</span>
          <span class="angled_text">Thursday</span>
          <span class="angled_text">Friday</span>
          
          <br>
  
          <input type="checkbox" name="monday" value="monday">
          <input type="checkbox" name="tuesday" value="tuesday">
          <input type="checkbox" name="wednesday" value="wednesday">
          <input type="checkbox" name="thursday" value="thursday">
          <input type="checkbox" name="friday" value="friday">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

checkbox css html
4 Answers

This is the way I would do it. Wrap the input inside a label to make it clickable. Positioning the child span using absolute positioning to take it outside the normal flow. And add enough padding at the top of the div so that the labels don't get cut off.

div {
  padding-top: 55px;
}
label.angled_text {
  margin-left: 4px;
  display: inline-block;
  position: relative;
}

label.angled_text span {
  position: absolute;
  top: -14px;
  left: .5em;
  
  transform-origin: bottom left;
  transform: rotate(-45deg);
  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">

<body>
  <div>
    <label class="angled_text">
      <input type="checkbox" name="monday" value="monday">
      <span>Monday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="tuesday" value="tuesday">
      <span>Tuesday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="wednesday" value="wednesday">
      <span>Wednesday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="thursday" value="thursday">
      <span>Thursday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="friday" value="friday">
      <span>Friday</span>
    </label>
  </div>
</body>

</html>

user_8563530

You can change its display: inline-block and set the width of it.

The reason to set the width is that transform only changes the way the element is displayed, but its original space and position stays the same. By setting the width of it, you are actually changing the original vertical space that exists between the labels.

table {
  margin-top: 50px;
}
table tbody {
  display: block;
}

.angled_text {
  display: inline-block;
  width: 18px;
  transform:         rotate(-45deg);

  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<body>
  <table id="dynamic_table">
    <tbody>
      <tr>
        <td>
          <span class="angled_text">Monday</span>
          <span class="angled_text">Tuesday</span>
          <span class="angled_text">Wednesday</span>
          <span class="angled_text">Thursday</span>
          <span class="angled_text">Friday</span>
          
          <br>
  
          <input type="checkbox" name="monday" value="monday">
          <input type="checkbox" name="tuesday" value="tuesday">
          <input type="checkbox" name="wednesday" value="wednesday">
          <input type="checkbox" name="thursday" value="thursday">
          <input type="checkbox" name="friday" value="friday">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

user_60802540

inline-block won't cut it, since the rotation destroys the horizontal layout. Use flex layout instead. Note the css requires some manual tweaking for width and so on. Maybe there's a more elegant way, but this does the job:

    <html lang="en">
    <body >
      <div class="flex labels">
        <span class="angled_text">Monday</span>
        <span class="angled_text">Tuesday</span>
        <span class="angled_text">Wednesday</span>
        <span class="angled_text">Thursday</span>
        <span class="angled_text">Friday</span>
      </div>

      <div class="flex">
        <input type="checkbox" name="monday" value="monday">
        <input type="checkbox" name="tuesday" value="tuesday">
        <input type="checkbox" name="wednesday" value="wednesday">
        <input type="checkbox" name="thursday" value="thursday">
        <input type="checkbox" name="friday" value="friday">
      </div>
    </body>
    </html>


    .flex {
      display: flex;
    }

    .labels {
      margin-top: 30px;
    }

    input {
      width: 30px;
    }

    .angled_text {
      display: block;
      width: 35px;
      position: relative;
      top: -10px;
      left: 5px;
      transform:         rotate(-45deg);

      /* legacy */
      -webkit-transform: rotate(-45deg);
      -moz-transform:    rotate(-45deg);
      -ms-transform:     rotate(-45deg);
      -o-transform:      rotate(-45deg);
    }
user_12847600

Use Table

table tbody {
  display: block;
}

.angled_text {
  display: block;
  margin-top: -18px;
  transform:         rotate(-45deg);

  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<body>
  <table id="dynamic_table">
    <tbody>
      <tr>
        <td>
          <span class="angled_text">Monday</span>
          </td>
          <td>
          <span class="angled_text">Tuesday</span>
          </td>
          <td>
          <span class="angled_text">Wednesday</span>
          </td>
          <td>
          <span class="angled_text">Thursday</span>
          </td>
          <td>
          <span class="angled_text">Friday</span>
          </td>
          </tr>
          <tr>
          <br>
          <td><br>
          <input type="checkbox" name="monday" value="monday">
          </td>
          <td><br>
          <input type="checkbox" name="tuesday" value="tuesday">
          </td>
          <td><br>
          <input type="checkbox" name="wednesday" value="wednesday">
          </td>
          <td><br>
          <input type="checkbox" name="thursday" value="thursday">
          </td>
          <td><br>
          <input type="checkbox" name="friday" value="friday">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

hope this help you.

user_127401600
Related