Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

351
Visualizações
Remove input focus border in react select

This is my styles config. Im using tailwindcss also.

export const colourStyles: StylesConfig = {
  control: (styles, { isFocused }) => ({
    ...styles,
    backgroundColor: 'white',
    border: '2px solid #E2E2E2',
    '&:hover': {
      border: '2px solid #141414',
    },
    borderRadius: '0.5rem',
    borderBottomLeftRadius: isFocused ? 0 : '',
    borderBottomRightRadius: isFocused ? 0 : '',
    boxShadow: '0px 2px 0px rgba(0, 0, 0, 0.04)',
  }),
  menu: (styles) => ({
    ...styles,
    height: 345,
    marginTop: '0px',
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    border: '2px solid #E2E2E2',
    borderTop: 'none',
    boxShadow:
      '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
  }),
  option: (styles, { isSelected }) => {
    return {
      ...styles,
      backgroundColor: isSelected ? '#f6f6f6' : 'white',
      color: isSelected ? '#141414' : '',
      '&:hover': {
        backgroundColor: '#f6f6f6',
      },
      paddingBottom: 0,
      paddingTop: 0,
      paddingLeft: 16,
      paddingRight: 16,
    };
  },
  input: (styles) => ({
    ...styles,
  }),
  menuList: (styles) => ({
    ...styles,
    padding: '6px 0px',
    minHeight: 343,
  }),
  placeholder: (styles) => ({ ...styles, fontSize: 14 }),
  singleValue: (styles) => ({ ...styles }),
};

this is my select component

const SingleValue = ({ children, ...props }: SingleValueProps) => {
  return (
    <components.SingleValue {...props}>
      {/* @ts-ignore */}
      {props?.selectProps?.value?.text ? (
        // @ts-ignore
        <div>{props?.selectProps?.value.text}</div>
      ) : (
        children
      )}
    </components.SingleValue>
  );
};


<Select
            {...field}
            blurInputOnSelect
            options={options}
            styles={colourStyles}
            placeholder={placeholder}
            components={{
              IndicatorSeparator: () => null,
              SingleValue,
            }}
            value={options.find((each) => each.value === field.value)}
            onChange={(newValue: any) => {
              field.onChange(newValue.value);
            }}
          />

image for reference

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda