Can not change the size of flag icon in react-phone-input-2 in React JS

481 Views Asked by At

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:

enter image description here

.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;
  }
}

0

There are 0 best solutions below