How to apply styles for defaultField, activeField and filledField separately?

[anserwaseem]

Tell me your problem! What do you want to achieve?

How to apply styles for defaultField, activeField and filledField separately? I want to be able to set borderColor & backgroundColor in three different scenarios:

1. Default: which can be set by passing values in inputStyle
2. Active: how to set styles for only the active field?
3. Filled: how to set styles for only filled fields?

@Ralfarios please help if you can

[Ralfarios]

Hi!

You might want to read this #15 for scenarios no.1 and 3.

For scenario no.2, you can use :where(.ant-input:focus) and :where(.ant-input-focused) for the class of the input.. like this .

Cheers, Ralfarios.

[anserwaseem]

otp_Input:[value]:not([value=""]) working like a charm for scenario 3

For scenario 2: i'm using .otp_Input:focus

otp_Input:where(.ant-input:focus, otp_Input:where(.ant-input-focused gives same result as well

But the problem is that focus styles are not applied when a backspace/delete is pressed

https://github.com/Ralfarios/antd-input-otp/assets/32386713/b90f2a1b-c339-43a2-b1e8-4c33554a4c77

[Ralfarios]

Hello @anserwaseem !

Yup, that's because the "focused" will be overwritten with [value]..

This should work..

.input-classname:where(.ant-input:focus),
.input-classname:where(.ant-input-focused) {
  border: 2px solid royalblue !important;
  background-color: #e0f9ff;
}

.input-classname[value]:not([value=""]):not(.input-classname:where(.ant-input:focus), .input-classname:where(.ant-input-focused)) {
  border: 2px solid #3f3f3f !important;
  background-color: #f2f9ff;
}

What I did is adding more not for the case when the input is focused on the field with existed value.. Give it a try.

[anserwaseem]

working, thank you so much @Ralfarios