I've been trying to achieve checkboxes with slanted text like the image below (where some level of overlapping is necessary):
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>
Aucun commentaire:
Enregistrer un commentaire