How to set none for border color of the phone input when using react-phone-number-input

Question

I'm using react-phone-number-input. This is the phone number field:

<PhoneInput
    defaultCountry={"CA"}
    placeholder={"Phone"}
    value={phone}
    onChange={(value: string) => {
       setPhone(value);
    }}
/>

and the css from: https://gitlab.com/catamphetamine/react-phone-number-input/-/blob/master/style.css

I set the border and outline of PhoneInputInput to none but it not working when focus.

.PhoneInputInput:focus-visible {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
}

Here's the image of this field:

Answer 1

It seems to be caused by the default input of reactjs. I added this to the globals.css file:

.input-phone-number input:focus{
    outline: none !important;
    border:none !important;
    box-shadow: none !important;
}

and use it in the PhoneInput field, then it worked for me:

<PhoneInput
    defaultCountry={"CA"}
    placeholder={"Phone"}
    value={phone}
    onChange={(value: string) => {
       setPhone(value);
    }}
    className={"input-phone-number"}
/>