Hi, I wonder what’s the best method to style active state for fields, for example I want a different color outline when a field is focused. Also, how to use the states function in weweb? I don’t find any docs about them, I can only add new states but don’t know how to utilize them. Thank you.

[image] Paginator - active page Ask us anything Hi Maxence wave Not really. At the moment the hover state is the only one that’s 100% reliable. We’ve been having issues with the active state mentioned above recently. Making more standard states available (like active lin…

sorry i’m not familiar with css either, how do I use the active pseudo class, in my case?

the link of mdn page is full of pratical examples. Also look for the :focus pseudo class.

Hi @dorilama thanks for your answer, I know that I should do :active pseudo class to style the css, but my problem is I don’t know how to do it in weweb. I tried putting .classname:focus{ styles } in the “custom css” section but doesn’t work

Custom css loads only in the production app. . You can use a style tag into a html element but you need to be careful There are ways of adding styles, displayed both in editor and published app, using custom code in plugins. Also if the property you want to modify is declared as inline style you n…

Hey @dorilama & @Joyce Now that we have the new states, would it be more easy to add a focus state when the textarea is in focus? [image] I prepared a custom state named focus and I think I need help binding “my own logic” to it. Thanks for your help. Matth

My understanding is that the state is managed internally by weweb and is not automatically switched when you focus the input, like what happens for hover state. For a “onfocus” workflow trigger to manage focus events you need to ask the weweb team. If you use the workaround that I describe here yo…

@Aurelie & @Flo is there a more “natural” HTML way to do this? I thought the new states were solving this use case. Perhaps I misunderstood. It’s seems like a lot of no-code to do such a simple thing. Have a nice evening. Matth-

I added a <style> tag in the custom code of the head of the page. textarea:focus { height: 300px !important; white-space: pre-wrap !important; } That’s ugly but this does the job. I hope I can clean this someday with a more low code approach.

I’m also confused about what the “States” are supposed to do. [image] it seems some of the properties are linked to all States (changing it will change it in all States) while other are related to the selected State. I believe only properties linked to the currently selected State should be disp…

Styling field focus state

Ask us anything How do I?

dorilama (Mariano) August 9, 2022, 7:05pm 2

in the editor only the hover state is working.
If you want to style the active state you need to use custom css with the active pseudo class.

Topic		Replies	Views
Design: Input field's active state Developer corner design	7	877	April 10, 2024
How to set Psuedo css on element in Weweb Ask us anything binding , design , css , custom-css	3	104	October 2, 2024
How do I add a "clicked" state to a button? How do I?	9	1866	August 24, 2022
Focus state on an element How do I?	8	1003	October 31, 2023
Currently no 'focus' state for the Mask Input. How to create one with a formula? How do I?	6	277	August 14, 2024

Styling field focus state

Related topics