How can I change the color of the bullets in Webflow without using code?
TL;DR
- Apply a custom class to the list item (LI) and change its text color in the Style panel.
- Ensure you’re styling the LI directly—not nested text elements—and use the default list structure for the bullet color to update properly.
To change the color of list bullets in Webflow without custom code, you'll need to apply styles directly to the list item (LI) element, not just the text.
1. Use a Custom Class on the List
- Select the List or List Item in your Webflow Designer.
- Click the Selector field at the top right and create a new class (e.g.,
custom-bullet).
2. Style the Text Color
- With the
custom-bulletclass selected, go to the Style panel. - Scroll to Typography and change the Text Color.
- Webflow applies the text color to both the bullet and text, as long as you're styling the
LIelement.
3. Check Your Styling Target
- If you're styling the Text Block inside the LI rather than the LI itself, the bullet may not reflect the color.
- Make sure you're targeting the entire List Item (LI) when applying the text color to affect the bullet.
4. Avoid Nested Elements That Interfere
- If you're using nested elements like custom icons or divs and replacing bullets, the default bullet color may not apply.
- For default bullet behavior and styling, stick to the basic Unordered List and List Item structure.
Summary
To change bullet color in Webflow without code, apply a custom class to the list item (LI) and set the text color in the Style panel. This will affect both the text and bullet if you use the default list structure.