I have a checkbox that I turned into a switch so that the user could choose "Yes" or "No": yes when it is clicked, not when it is not clicked. When the switch is not clicked, the text "No" appears as expected. However, when I load the switch, the text does not change to "Yes" as expected. I would like to see what might be causing this problem.
My CSS code is as follows:
.switch {
position: relative;
display: inline-block;
width: 105px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
transform: translateX(69px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider.round:after {
content: 'NÃO';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 12px;
font-family: Verdana, sans-serif;
}
input[type="checkbox"]:checked + .slider.round:after {
content: 'SIM';
}<label class="switch">
<input data-val="true" data-val-required="O campo CandidatarOutros é necessário." htmlattributes="{ class = form-control, checked = True }" id="CandidatarOutros" name="CandidatarOutros" type="checkbox" value="true">
<div class="slider round"></div>
</label>As for HTML code, this is not 100% HTML code. As I'm working on ASP.NET, I'm using one of their helpers to create checkboxes:
<label class="switch">
<input data-val="true" data-val-required="O campo CandidatarOutros é necessário." htmlattributes="{ class = form-control, checked = True }" id="CandidatarOutros" name="CandidatarOutros" type="checkbox" value="true">
<div class="slider round"></div>
</label>