- Joined
- Jul 25, 2024
- Messages
- 142
- Thread Author
- #1
Overview
This simple CSS insert adds a nice subtle UI tweak for your checkboxes. First, we'll fade out unchecked boxes and labels to a softer color, helping to give them a "deactivated" appearance. Next, we highlight the checkbox color when hovering over an option.
When a box is checked, we'll change the label color back to normal giving it an "on" appearance. We'll apply fade transitions using the @xf-baseAnimationSpeed value, then optionally set the pointer cursor and checked icon weight (outline vs solid).
CSS snippet
Drop this into your extra.less template:
Editing the values
You only need the edit the following lines if needed, but the default values should work great on their own:
The @controlColors set the color of checkbox icons (note that @controlColor--hover is also used for the checked state). The @controlLabelColors affect the label text when a box is checked or unchecked. Finally, you can make checked boxes solid by using 'bold', and change the cursor pointer.
A few notes
While this is somewhat expanded to make beginner-friendly edits, you could optimize this with CSS knowledge. Further, since this is being dropped into extra.less, the @control variables don't override those in core_input.less - so we need to duplicate some code from that template
. This could be avoided via an addon with Template Modifications. For the Less parent selector, we use the input[type="checkbox] in order to declare easy sibling combinators.
This simple CSS insert adds a nice subtle UI tweak for your checkboxes. First, we'll fade out unchecked boxes and labels to a softer color, helping to give them a "deactivated" appearance. Next, we highlight the checkbox color when hovering over an option.
When a box is checked, we'll change the label color back to normal giving it an "on" appearance. We'll apply fade transitions using the @xf-baseAnimationSpeed value, then optionally set the pointer cursor and checked icon weight (outline vs solid).
CSS snippet
Drop this into your extra.less template:
Editing the values
You only need the edit the following lines if needed, but the default values should work great on their own:
The @controlColors set the color of checkbox icons (note that @controlColor--hover is also used for the checked state). The @controlLabelColors affect the label text when a box is checked or unchecked. Finally, you can make checked boxes solid by using 'bold', and change the cursor pointer.
A few notes
While this is somewhat expanded to make beginner-friendly edits, you could optimize this with CSS knowledge. Further, since this is being dropped into extra.less, the @control variables don't override those in core_input.less - so we need to duplicate some code from that template
. This could be avoided via an addon with Template Modifications. For the Less parent selector, we use the input[type="checkbox] in order to declare easy sibling combinators.