'React-Phone-Input-2 customize border of input on focus

I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusing. I´m using material-ui css option. Here is the code so far:

....
            <PhoneInput
                country={'pt'}
                localization={pt}
                specialLabel={field.label}
                value={phoneValue}
                onChange={phone => setPhoneValue(phone)}
                inputStyle={{
                    '&:focus': {
                        borderColor: 'red'
                    }
                }}
            />

Sample:

Thanks!

reactjs jsx

Solution 1:^[1]

You can change border color by placing a class to containerClass of PhoneInput component. That is, if you you use Material UI you can define a class as following

borderClass: {
    "&.react-tel-input .form-control:focus": {
       borderColor: "#69e781",
       boxShadow: "0px 0px 0px 1px #69e781",  
    }
}    

then use this class as follows

<PhoneInput      
  containerClass={classes.borderClass}
  .
  .
/>

or if you use a CSS file you can override the rule below in your CSS file

.react-tel-input .form-control:focus:

Solution 2:^[2]

The styles on focusing the input of React-Phone-Input exists on .PhoneInputInput class on focus-visible property. In order to override this styling, access the PhoneInputInput Class.

Below example is for the devs using Material UI styled components.

".PhoneInputInput": {
  "&:focus-visible": {
     outline: "none",
   },
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	bad_coder
Solution 2	Mario Petrovic

'React-Phone-Input-2 customize border of input on focus

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]