hope you are doing good. I am stuck in this problem from last 2 days which is that I am trying to increase the width and size of selected country flag icon in react-phone-input-2. I have tried adding multiple classes like .country .iti-flag and .iti-flag-svg.
I used .iti-flag-svg as someone suggests to use this classes as the flags are actually svgs.
I also looked for react-phone-input-2 documentation which gave me some classes like buttonClass, inputClass, containerClass. But none of them worked for me.
This is the code in css I have tried:
.react-phn-inpt {
display: flex;
justify-content: center;
.form-control {
background-color: #ffffff !important;
border-radius: 5px;
color: rgb(44, 4, 26);
height: 50px !important;
width: 100% !important;
font-size: 1.1rem;
border: 2px solid transparent;
border-bottom: 2px solid transparent;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-left: 0.2rem;
border-image: linear-gradient(
to right,
rgb(236, 185, 238),
rgb(164, 178, 238),
rgb(230, 134, 155)
)
1;
&:focus {
border-color: rgb(105, 97, 97);
box-shadow: 0 0 5px rgb(87, 81, 81);
}
@media screen and (max-width: 500px) {
height: 30px;
font-size: 0.8rem;
}
}
.react-tel-input {
margin-top: 10px !important;
margin-left: 10px !important;
width: 60%;
@media screen and (max-width: 500px) {
width: 90%;
}
}
.flag-dropdown {
background-color: #eff2f5 !important;
border-radius: 5px 0 0 5px;
height: 50px;
width: 14%;
border: 2px solid transparent;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-image: linear-gradient(
to right,
rgb(236, 185, 238),
rgb(164, 178, 238),
rgb(230, 134, 155)
)
1;
}
.iti-flag {
color: rgb(253, 253, 253);
height: 30px !important;
width: 30px !important;
}
.selected-flag {
width: 100%;
font-size: 2rem !important;
}
.iti-flag-svg {
height: 60px;
width: 60px;
}
.my-dropdown .iti-flag {
width: 30px;
height: 30px;
}
.country .country-name {
font-size: 1rem;
color: black;
margin-left: 0.1rem;
}
.country .dial-code {
font-size: 14px;
}
.country .iti-flag {
width: 70px !important;
height: 70px !important;
}
}
