Styling field focus state

[khairul]

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.

[dorilama]

Paginator - active page

Hi Maxence 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 link and focus) are one of the current priorities for the tech team but we don’t have a clear timeline yet on when those states will be available in the product. Was there a specific use case you were trying to set up?

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.

[khairul]

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

[dorilama]

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

[khairul]

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

[dorilama]

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