Change the border Color of reactstrap input component-CodePudding

I am trying to override the color of reactstrap input component Currently It looks like this

and this is my implementation:

          <Input
                    invalid={formik.errors.password ? true : false}
                    className="login-input"
                    id="password"
                    name="password"
                    placeholder="Password"
                    type="password"
                    autoComplete="new-password"
                    onBlur={formik.handleBlur}
                    onChange={formik.handleChange}
                    value={formik.values.password}
                  />

css:

.login-input:focus {
    border-color: white !important;
}

CodePudding user response：

reactstrap inputs also get a box-shadow, so try this:
(!important might not be necessary)

.login-input:focus {
    border-color: white !important;
    box-shadow: none !important;
}