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.
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.
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 need to override the declaration
Now that we have the new states, would it be more easy to add a focus state when the textarea is in focus?
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 you can activate your element state by binding the state condition.
In that example you keep track of the focused element updating a variable with the name of the element (the one in the settings panel), so you can bind the focus condition to that.
Something like this:
@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.