I want the flag to be in circle and the dropdown icon removed

Question

How can I give border radius and remove dropdown button of react-phone-input-2

I want the flag to be in circle and the dropdown icon removed

<PhoneInput
inputStyle={ {  height: '25px', width: '90px',       paddingRight:'0px',paddingLeft:'50px',
paddingBottom:'16px', fontSize:'14px' } }
              
country={ 'eg' }
enableSearch
dropdownStyle={ {height:'90px',width:'330px' } }
                
value={ phone }
onChange={ (phone) => setPhone(phone) }/>

Answer 1

Try this:

<PhoneInput
  inputStyle={ {  height: '25px', width: '90px',       
  paddingRight:'0px',paddingLeft:'50px',
  paddingBottom:'16px', fontSize:'14px' } }
  country={'eg'}
  enableSearch
  dropdownStyle={{
    height: '90px',
    width: '330px',
  }}
  value={phone}
  onChange={(phone) => setPhone(phone)}
/>

Update your css:

.react-tel-input .flag {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
}

.react-tel-input .selected-flag .arrow {
  display: none;
}

This should give you the desired result with a circular flag and no dropdown icon. You may need to adjust the border color and other styles to match your specific design.

check: https://playcode.io/1587617