Step 1/3
There's some optional CSS in here that styles the icon SVG when the input is focused.
This is the default Webflow Checkbox with a bunch of sibling elements. The label is positioned on top so that users can click anywhere to toggle it.
Use the following CSS to change the "Checked" styling.
This is very similar to the above element with some additional classes to avoid conflicts.
These are mostly Webflow elements which are lightly styled with custom CSS. I tried to keep as much in Webflow as possible.
These are default Webflow checkbox. I'm using custom CSS to change the label styles when checked.
There's an SVG embed inside of each checkbox. It's only visible if the checkbox is checked.
It's a native Webflow select field with a custom dropdown icon. You can edit the dropdown SVG by selecting the input and then hit the right arrow key. The CSS for the icon is below.
It's annoying to manually change the select options, so I made a tool which can do it automatically https://select-input-tool.webflow.io/
Step 1/4
.svg){kind=spacer}
.svg){kind=small}
