To style the standard slider circles in Webflow with a fill for the selected circle and a border with no fill for the non-selected circles, you can follow these steps:
1. Select the Slider component in the Webflow Designer.
2. Go to the Styles panel and locate the Slider Track element. This is the parent element that contains the slider circles.
3. Select the Slider Track element and add the following styles:
a. Set the `position` property to `relative` to ensure its child elements are positioned relative to it.
b. Set the `overflow` property to `hidden` to hide any overflow of the child elements.
c. Set the `height` property to your desired height. This will determine the size of the slider circles.
d. Set the `background-color` property to the fill color you want for the selected circle.
4. Now, locate the Slider Dot element inside the Slider Track. This is the individual circle element.
5. Select the Slider Dot element and add the following styles:
a. Set the `position` property to `absolute` to allow precise positioning within the Slider Track.
b. Set the `border-radius` property to `50%` to make the element circular.
c. Set the `width` and `height` properties to your desired size for the non-selected circles.
d. Set the `border` property to define the border style, width, and color for the non-selected circles.
e. Optionally, set the `background-color` property to `transparent` to remove any fill for the non-selected circles.
6. To style the selected circle differently, locate the active Slider Dot element inside the Slider Track. This is the circle element when it is selected.
7. Select the active Slider Dot element and add any additional styles you want for the selected circle. This could include a different fill color, border color, or any other visual effect.
By following these steps, you can customize the appearance of the standard slider circles in Webflow to have a fill for the selected circle and a border with no fill for the non-selected circles.