Streaming live at 10am (PST)

How do I create a custom input field for checkboxes?


#21

i didnt get it, can u please share a step-by-step guide?


#22

You have fixed Navbar, there is links inside which is white color font. If you want white background for navbar, then change links color font to red, for example. Then do this steps:

1) Inside the current navbar add div, give it class (for example nav-background) and position:absolute, aligning: full
2) give nav-background some solid white color
3) make its opacity 0%
4) choose element which will initiate white background appear (when this element will go out of view), I would suggest take hero-banner
5) create interaction for this element:
trigger = scroll
affect different element = nav-background
scroll into view: opacity = 0%
scroll out of view: opacity = 100%

That's it.
Hope it is clear enough

Cheers,
Anna


#23

Thx Anna! i got it and came very nice.


#24

Hello Anna,

Can you please guide me how to do the custom check box, like you have guided to do the custom radio button.


#25

Hi again @Deepak,

All you need to do is give every element its own class. Then you can change and style everything, every part.
Here is example
http://sapdesign-sandbox.webflow.io/custom-checkbox

https://webflow.com/website/SAPDesign-sandbox

Regards,
Anna


#26

Hi Anna,

I want the check box design like when i check it should highlight and when i uncheck it should be normal.


#28

Hi Dave all the custom css are done i need help on interaction part


#29

Hi @Deepak, ok thank, I am happy to take a further look at this.

Could you share some screenshots where the checkboxes are in your design, and could you describe in detail, how you want the checkbox interaction to work. When the check box is selected, what exactly do you want to happen.

Regards,
Dave


#30

When i check it should higjlight and its happening, but when i uncheck it should back to previous style


#31

Did you highlight it with interaction?


#32

Yes, i have given interaction


#33

Well, then if you use click trigger, there you can use 1st click -highligt and 2nd click - back to previous style


#34

i did the same thing but not happening...


closed #35

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.