[英]How to set none for border color of the phone input when using react-phone-number-input
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 style from: https://gitlab.com/catamphetamine/react-phone-number-input/-/blob/master/style.css和 css 样式来自: 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 的边框和轮廓设置为无,但在焦点时它不起作用。
.PhoneInputInput:focus-visible {
flex: 1;
min-width: 0;
border: none;
outline: none;
}
It seems to be caused by the default input of reactjs. I added this to the globals.css file:好像是默认输入reactjs导致的,我在globals.css文件中添加了这个:
.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 字段中使用它,然后它对我有用:
<PhoneInput
defaultCountry={"CA"}
placeholder={"Phone"}
value={phone}
onChange={(value: string) => {
setPhone(value);
}}
className={"input-phone-number"}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.