Continuation of this query How to format custom checkbox label text with row breaks?.
I am facing an issue where the label text of my custom checkbox is not aligned properly with the checkbox span element.
I have experimented with different solutions but nothing seems to work. Can someone provide guidance on how to resolve this problem?
input[type="checkbox"].custom-switch {
display: none;
}
.switch{
display: inline-flex;
}
/* Additional CSS code here */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
<input class="custom-switch" id="updateAllCheckbox" type="checkbox" style="top: 2px;">
<label for="updateAllCheckbox" style="font-weight: normal; font-family: inherit;">
Some sample content
<select class="form-control dropdownUpdate" style="width: 90px; display: initial; padding: 0px; height: 23px; margin-right: 3px;;margin-left: 5px;">
</select>
More text that needs formatting
</label>
</div>
<br />
<br />
<br />
<div>
<input class="custom-switch" id="test3" type="checkbox" style="top: 2px;">
<label for="test3" style="font-weight: normal; font-family: inherit;">
<span class="switch"></span>
Checkbox label with custom switch design
</label>
</div>Update: