使用反應電話號碼輸入時如何為電話輸入的邊框顏色設置無

Question

我正在使用反應電話號碼輸入。 這是電話號碼字段：

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

和 css 樣式來自： https://gitlab.com/catamphetamine/react-phone-number-input/-/blob/master/style.css

我將 PhoneInputInput 的邊框和輪廓設置為無，但在焦點時它不起作用。

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

這是該字段的圖像：

Answer 1

好像是默認輸入reactjs導致的，我在globals.css文件中添加了這個：

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

並在 PhoneInput 字段中使用它，然后它對我有用：

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