Followup to this question Make custom checkbox label text row breaks like normal.
I have a custom checkbox and I want to make the label text align with the checkbox span
element.
I tried a few thing but nothing seems to move anything. How can thi be solved?
input[type="checkbox"].custom-switch {
display: none;
}
.switch{
display: inline-flex;
}
.switch:before {
width: 30px;
min-width: 30px;
height: 15px;
border-radius: 15px;
border: 2px solid #ddd;
background-color: #EEE;
content: "";
margin-right: 5px;
transition: background-color 0.5s linear;
}
.switch:after {
width: 11px;
height: 11px;
border-radius: 15px;
background-color: #fff;
content: "";
transition: margin 0.1s linear;
box-shadow: 0px 0px 5px #aaa;
position: absolute;
margin-top: 2px;
margin-left: 2px;
}
input[type="checkbox"].custom-switch + label {
cursor: pointer;
}
input[type="checkbox"].custom-switch:checked + label > .switch:before {
background-color: #1a94ff;
}
input[type="checkbox"].custom-switch:checked + label >.switch:after {
margin: 2px 0 0 17px;
}
<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;">
<span class="switch"></span>
Some text about updating
<select class="form-control dropdownUpdate" style="width: 90px; display: initial; padding: 0px; height: 23px; margin-right: 3px;;margin-left: 5px;">
<option value="red">Newest Ver</option>
<option value="yellow">Old Version</option>
<option value="green">Outdated Ver</option>
</select>
Even more text to format
</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 with custom switch without a select element
</label>
</div>
Update:
Aucun commentaire:
Enregistrer un commentaire