I am having checkboxes with label and the normal labels are displayed as expected and no issues with it.
Current scenario: But when I give long label then the text goes to next line and starts under checkbox.
Working Snippet:
.checkbox input {
display: none;
}
.checkbox__input {
width: 1pc;
height: 1pc;
display: inline-block;
position: relative;
box-shadow: inset 0 0 0 0 #049fd9;
border: 1px ridge #049fd9;
}
input:checked~.checkbox__label {
font-weight: 400;
font-size: 9pt;
font-family: Regular;
display: inline;
position: relative;
}
<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox One</span>
</label>
<br />
<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox Two</span>
</label>
<br />
<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action. Label text needs to be really really long to show this in action.</span>
<label>
<br />
<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__input"></span>
<span class="checkbox__label">Checkbox Four</span>
</label>
Expected Result:
-> For long label, when label goes to next line then it should start from the start of the previous line.
***Checkbox*** Label text needs to be really really long to show this in action. Label text needs to be really
really long to show this in action. Label text needs to be really really long to show this in
action.
Things I have tried:
input:checked~.checkbox__label {
display: flex;
flex-wrap: wrap
}
And the above one doesn't work..
And this is a dynamically generated checkboxes so I cannot change the css style for long text label alone.. It needs to be in common and resolve the issue of long text in general. Also please don't modify the class and elements given.. I need to achieve the result by modifying only the css properties..
Any good help would be greatly appreaciated. Thanks..
Aucun commentaire:
Enregistrer un commentaire