While attempting to make my radio button square using CSS by incorporating spans and before and after elements, I encountered a new client request. The client now wants the radio buttons to be disabled with a unique style when in this state. Unfortunately, due to the use of spans, I faced a challenge in styling the radio button when it is disabled. Is there a CSS-based solution to this problem rather than resorting to JavaScript?
CSS
body {
background: #fbfbfb;
font-family: Arial;
font-weight: bold;
color: rgba(0, 0, 0, 0.7);
}
.radio-button
{
display: none;
}
.radio[disabled] {
display: none;
}
.radio-label {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
}
.radio-label .radio-span {
position: relative;
line-height: 16px;
}
.radio-label .radio-span:before {
font-family: "FontAwesome";
content: "\f0c8";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
.radio-label .radio-span:after {
position: absolute;
top: 1px;
left: 0px;
transition: 300ms;
opacity: 0;
font-family: "FontAwesome";
content: "\f00c";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
.radio-label .radio-button:checked+.radio-span:after {
opacity: 1;
}
/*
.radio-span needs to have this style when the radio button is disabled
{
font-family: "FontAwesome";
content: "\f04d";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
} */
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/mycode.js" crossorigin="anonymous"></script>
</head>
<body>
<form>
<label class="radio-label"><input id="toDisable" type="radio" name="gender" value="male" class="radio-button"> <span class="radio-span"> Male </span></label><br>
<label class="radio-label"><input type="radio" name="gender" value="female" class="radio-button"> <span class="radio-span"> Female </span> </label><br>
<label class="radio-label"><input type="radio" name="gender" value="other" class="radio-button"> <span class="radio-span"> Other </span></label> <br>
</form>
<script>
document.getElementById("toDisable").disabled = true;
</script>
</body>
</html>