问题
I use some custom checkbox style but this style breaks the line breaks, if the space gets to small.
In my code the first div is what I currently have with the new checkbox style and the broken breaks.
The second dev is how it should be breaking the words into the next line.
How can I make the custom one also do it like the second div?
input[type="checkbox"].custom-switch {
display: none;
}
input[type="checkbox"].custom-switch+label {
position: relative;
display: inline-flex;
cursor: pointer;
font-family: sans-serif;
font-size: 14px;
line-height: 1.0;
margin-right: 15px;
}
input[type="checkbox"].custom-switch+label: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;
}
input[type="checkbox"].custom-switch+label: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;
left: 2px;
top: 2px;
}
input[type="checkbox"].custom-switch:checked+label:before {
background-color: #1a94ff;
}
input[type="checkbox"].custom-switch:checked+label:after {
margin: 0 0 0 15px;
}<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 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 />
<div>
<label for="test2" style="font-weight: normal; font-family: inherit;">
<input id="test2" type="checkbox" style="top: 2px;">
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;">
Checkbox with custom switch without a select element
</label>
</div>Update:
When removing the display: inline-flex; from input[type="checkbox"].custom-switch+label and add it back to input[type="checkbox"].custom-switch + label::before the line breaks are now rigth but the dot of the checkbox is now to heigh. If the label contains only text, the dot will be at the rigth place but if a select is also within the label, the whole label gets a few px bigger and this cause the dot to be to high. I need to have both working.
(The height of the select elements are set to 23px. On my site its set to initial and thats equals 23px. So just think that this value cant be changed)
input[type="checkbox"].custom-switch {
display: none;
}
input[type="checkbox"].custom-switch+label {
position: relative;
//display: inline-flex; //REMOVED
cursor: pointer;
font-family: sans-serif;
font-size: 14px;
line-height: 1.0;
margin-right: 15px;
}
input[type="checkbox"].custom-switch+label: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;
display: inline-flex; // ADDED
}
input[type="checkbox"].custom-switch+label: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;
left: 2px;
top: 2px;
}
input[type="checkbox"].custom-switch:checked+label:before {
background-color: #1a94ff;
}
input[type="checkbox"].custom-switch:checked+label:after {
margin: 0 0 0 15px;
}<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 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 />
<div>
<label for="test2" style="font-weight: normal; font-family: inherit;">
<input id="test2" type="checkbox" style="top: 2px;">
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;">
Checkbox with custom switch without a select element
</label>
</div>Update 2:
Adding top: 50%; transform: translateY(-51%) to input[type="checkbox"].custom-switch + label::after works. But when the text breaks into the next line, the dot is wrong again.
回答1:
I got it to work with many changes. Now I must put an <span class="switch"></span> after the label to show the switch. But I am not 100% statisfied because the text is to low in relative to the switch or the other way around the switch is to high. I dont know how this can be fixed.
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 />
<div>
<label for="test2" style="font-weight: normal; font-family: inherit;">
<input id="test2" type="checkbox" style="top: 2px;">
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>来源：https://stackoverflow.com/questions/64221260/make-custom-checkbox-label-text-row-breaks-like-normal