Dispongo de un toggle el cual quiero conservar su comportamiento, pero anulando la posibilidad del usuario de utilizarlo.
body, html {
background: #454545;
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
z-index: -1;
}
.btn {
border: 1px solid #107a00;
display: inline-block;
padding: 5px;
position: relative;
text-align: center;
transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
display: none;
}
input[type="radio"].toggle + label {
cursor: pointer;
min-width: 100px;
}
input[type="radio"].toggle + label:hover {
background: none;
color: #107a00;
}
input[type="radio"].toggle + label {
background: none;
color: #fff;
}
input[type="radio"].toggle + label:after {
background: #107a00;
content: "";
height: 100%;
position: absolute;
top: 0;
transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
width: 100%;
z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
margin-left: 1px;
}
input[type="radio"].toggle.toggle-right + label:after {
left: -100%;
}
input[type="radio"].toggle:checked + label {
cursor: default;
color: #f5dd01;
transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
left: 0;
}
<div>
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">Cable</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label for="toggle-off" class="btn">WiFi</label>
</div>
He probado a añadir al div el estilo pointer-events: none;
pero continua permitiendo que el usuario lo use.
¿Cómo puedo caparlo?