change/override style for antdesign Input component

Question

I want to change the styling for antdesign Input component and I am not sure how to make it work. Now, I have been able to change the style on validation success and the border color changes to green on hover. but still, when I click in the field to type, it still shows blue border. Now, why is that happening? How do I override the antdesign styles?

<FormItem  hasFeedback validateStatus={this.state.passwordErr} help={passwordHelp}  label="Password" >

            <Input className={validClass}   type="password" name="password" value={this.state.password} onChange={this.handlePassword} />

            </FormItem>

this is a small relevant portion.

this css works for the hover

 .success:hover{
    border:1px solid green;
    box-shadow: 0 0 2px green;
}

but this doesnt work when I do it without hover

 .success:hover{
    border:1px solid green;
    box-shadow: 0 0 2px green;
}

I have noticed that this is the portion that is blocking my css

.ant-input:focus {
    border-color: #5070f2;
     outline: 0; 
    -webkit-box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2); 
    box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
}

So, how do I override this css and force it to use mine?

here's the image of the effect i want to change the blue to green.

and here's the code in inspect

Solution 1

You overwrite only the styles on :hover, you say that you found that .ant-input:focus { is overwriting your styles.

Why don't you write styles for the :focus event then ?

    .success:focus {
      border:2px solid red;
     }

<input type="text" class="success">

If this doesn't work, write a more specific path like input.success:focus or form input.success:focus

But i guess ( since it's about focus on input elements ) that the problem is with the outline which appears on focus

You can either change the outline color/width etc. or hide it with outline:none and use your border style

input.success:focus { /*or a more specific selector*/
   outline-color: red;
}

<input type="text" class="success">

input.success:focus { /*or a more specific selector*/
      outline:none;
      border:3px solid red;
}

<input type="text" class="success">

Solution 2

I came to the same problem and my solution works well for Antd version4.

<Input suffix={<Component />}/>

css:

.ant-input-affix-wrapper {
  border: ....;
}

.ant-input-affix-wrapper-focused {
  border: ...;
  box-shadow: ...;
}

Comments

[Hinrich]

Your css has to be more specific to override the vendor css.

[faraz]

although i have tried something like that, let me try that again.

[Mihai T]

if your input has 2 classes : success and .ant-input, you can write .ant-input.success:focus { border:2px solid red;}

[faraz]

now, it seems that's not the thing that's blocking. in the inspect from browser I changed that to .ant-input:focus { border:2px solid red; } and I am still getting a blue border, so that's not it

[Mihai T]

The problem is with the outline . Instead of border set outline-color:red . Or set outline:none and it will dissapear. THis on :focus event with a specific seletor

[Mihai T]

Did you see my updated answer ? what styles do you have in your inspect element on that input ? on normal state, hover state and focus state ? which styles are cut out ? or can you show me an image maybe with the effect when you click on the input and the inspect element with code ?

[Mihai T]

@faraz that is the outline + some box shadow. use .ant-form-input-control input.ant-input, ant-form-input-control input.ant-input:focus { outline:none; box-shadow:none; border:2px solid red;}

[faraz]

well, finally had to use inline style to make it work

[Mihai T]

@faraz glad i could help. don't forget to rate my answer