What I’m trying to do:
I’m trying to change the checkbox style in the Anvil iframe element to make it bolder.
What I’ve tried and what’s not working:
I’ve tried searching the documentation for help, but I did not find any attribute for the checkbox.
Welcome to the forum!
It’s in the properties pane (on the right) when you have the checkbox selected. Look in the Text section, see how there’s a bit that says More with a downward pointing symbol? Click that to see more options.
1 Like
Only to be sure. You want to change the style of the text or the checkbox itself (yellow mark)?
So, this is the checkbox I’m trying to modify (The actual box we click). It is a bit faded, and I want to make it more visible. If that’s not possible, can we make the actual text bolder? The point is to make users notice this part.
Thank you!
Where is this properties pane? I did not understand.
Select the checkbox in the IDE. Look on the right side of the screen. There should be a section there that shows components you can drag onto the form. Scroll down in that to see the properties pane.
1. go to theme
2. find that part:
3. Add or edit this 2 lines. Not sure what is in standard there. I’ve done alot of modifications to each component.
It will add borders and shadow to the box. You can change color of the borders if you want.
.checkbox input {
border: 1px solid %color:On Surface Variant%; /* Add a border for better visibility */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a shadow */
}
If you want to keep the checkboxes as standard and change only this one you can convert it to a role and apply it on the checkbox.
1 Like
It’s the area I boxed-in in red. (It’s longer than my screen, so I drew arrows.)
Notice the “MORE” and “LESS” buttons at the right of each sub-panel. These show you more (and less, respectively) of the sub-panel contents. If you don’t see “bold”, for example, you may need to click the corresponding “MORE” button.