CODEWITHSUNDEEP
reactjsnext.jstailwind-cssinput-fieldreact-phone-number-input
tiennl
tiennl

Reputation: 334

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 from: 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:focus-visible {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
}

Here's the image of this field: Phone Input Field

Upvotes: 0

Views: 3533

Answers (3)

chirag_9121
chirag_9121

Reputation: 11

For TailwindCSS, we can simply add a className in the inputProps property.

<PhoneInput
      defaultCountry="in"
      inputProps={{
      className:
           "focus:outline-none focus:ring-0",
      }}
      value={phone}
      onChange={(phone) => setPhone(phone)}
/>

Upvotes: 0

kuna thana
kuna thana

Reputation: 107

Override the default phone input in Nextjs using this

import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/material.css';
import { useTheme } from '@mui/material';

const PhoneInputCustomize = ({ theme, size }) => {
  return (
    <style jsx global>
      {`
        .react-tel-input {
          .form-control {
            height: ${size === 'medium' ? '100%;' : '45px;'}
            &:focus {
              border-color: ${theme.colors.primary.main};
              box-shadow: 0 0 0 1px ${theme.colors.primary.main};
              & + div:before {
                color: ${theme.colors.primary.main};
              }
            }
          }
          .special-label {
            position: absolute;
            z-index: 1;
            top: -7px;
            left: 25px;
            display: block;
            background: ${theme.palette.mode === 'dark' ? '#252525' : '#fff'};
            padding: 0 5px;
            font-size: 11px;
            white-space: nowrap;
          }
          .special-label::after {
            content: '*';
            color: #f00;
          }
        }
      `}
    </style>
  );
};

function PhoneNumber() {
   const theme = useTheme();
   return (
    <>
      <PhoneInputCustomize theme={theme} size={size} />
      <PhoneInput
        defaultCountry={"CA"}
        placeholder={"Phone"}
        value={phone}
        onChange={(value: string) => {
        setPhone(value);
      }}
    />
   </>
}

Upvotes: 0

tiennl
tiennl

Reputation: 334

It seems to be caused by the default input of reactjs. I added this to the globals.css file:

.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
    defaultCountry={"CA"}
    placeholder={"Phone"}
    value={phone}
    onChange={(value: string) => {
       setPhone(value);
    }}
    className={"input-phone-number"}
/>

Upvotes: 2

Related Questions