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.
I’m also confused about what the “States” are supposed to do.
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 displayed, otherwise it’s confusing as hell.
The default state style will cascade to all the states as is normal in HTML&CSS. You can specify styles for states such as hover that then will override the default state style. For example, on hover of a button you want to change the background color. If the style didn’t cascade you would have to set all the style again just to change the background color.
you can use the :focus pseudo-class in your CSS for styling active state for form fields. you can create new states for using states in WeWeb, but understanding how to utilize them is essential. Check out this article on hover effects in inline CSS
