disabled state for custom check boxes and/or radio buttons
October 23, 2024 8:13 PM
Under certain circumstances, I would like to disable my check boxes and/or radio buttons in an exam.
When I use the default cb/rb and set to disabled: the image appears grey is unclickable, still shows the user's selection.
When I use custom cb/rb from the test&survey menu: disabled state will prevent clicking but it doesn't change the appearance & the mouse still switches to the pointy finger.
I've tried modifying the appearance using js/css but so far haven't had any luck.
I'm open to any suggestions on how to get this to work. 🙂
Discussion (3)
Here is a website that has some great CSS for custom Checkbox Buttons
https://css-tricks.com/the-checkbox-hack/
There is even state for Disabled.
Thank you for sharing the website. I didn't use the content from here but it did make me reconsider how I was approaching checkboxes. Now instead of the built-in Lectora custom checkboxes (which are actually images) I've taken control and fully customized them with CSS (& a little bit of help from ChatGPT). Now they are looking and working exactly how I want them to.
Here is my css solution in case it may be helpful to anyone else:
/* Common styles for both checkboxes and radio buttons */
input[type="checkbox"], input[type="radio"] {
width: 20px;
height: 20px;
margin-right: 10px;
cursor: pointer;
/* Remove default appearance */
appearance: none;
background-color: #fff;
border: 2px solid #333;
position: relative;
transition: border-color 0.3s ease;
}
/* Specific shape for checkboxes (square) */
input[type="checkbox"] {
border-radius: 4px;
}
/* Specific shape for radio buttons (circle) */
input[type="radio"] {
border-radius: 50%;
}
/* Add a smaller teal box centered inside the checkbox/radio */
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px; /* Smaller box size */
height: 12px;
background-color: #6CBDB6; /* teal fill */
transform: translate(-50%, -50%); /* Center the box horizontally and vertically */
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* For radio button, keep the smaller box circular */
input[type="radio"]:checked::before {
border-radius: 50%;
}
/* Optional: hover state */
input[type="checkbox"]:hover, input[type="radio"]:hover {
border-color: #888;
}
/* Optional: focus state
input[type="checkbox"]:focus, input[type="radio"]:focus {
outline: 2px solid #007bff;
} */
/* Disabled state */
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
background-color: #e0e0e0;
border-color: #CCC;
cursor: not-allowed;
}
/* Keep the smaller teal box visible for disabled and selected state */
input[type="checkbox"]:disabled:checked::before, input[type="radio"]:disabled:checked::before {
background-color: #95A9A7;
}