Reaccionar-Seleccionar Eliminar borde de enfoque

El tutorial o código que encontrarás en este post es la solución más fácil y válida que encontramos a esta inquietud o dilema.

Solución:

Reaccionar-seleccionar v3

const style = 
  control: base => (
    ...base,
    border: 0,
    // This line disable the blue border
    boxShadow: 'none'
  )
;

Aquí un ejemplo en vivo

Reaccionar-seleccionar v2

Para restablecer el borde cuando Select está enfocado tienes dos soluciones:

1. Utilizar el state

   control: (base, state) => (
       ...base,
       border: state.isFocused ? 0 : 0,
       // This line disable the blue border
       boxShadow: state.isFocused ? 0 : 0,
       '&:hover': 
          border: state.isFocused ? 0 : 0
       
   )
   

2. Usar !important (este funciona pero recomiendo usar la primera solución, !important nunca es bueno emplear)

   control: base => (
      ...base,
      border: '0 !important',
      // This line disable the blue border
      boxShadow: '0 !important',
      '&:hover': 
          border: '0 !important'
       
   )
   

No te olvides de restablecer el boxShadow (borde azul) que obtienes.

Aquí un ejemplo en vivo.

Esto funcionó para mí:

control: (base, state) => (
    ...base,
    border: '1px solid black',
    boxShadow: 'none',
    '&:hover': 
        border: '1px solid black',
    
)

Esto asegurará que el borde permanezca cuando esté inactivo, cuando esté suspendido o activo, pero no haya una sombra de cuadro azul.

Si para ti ha resultado de ayuda nuestro artículo, agradeceríamos que lo compartas con otros entusiastas de la programación de esta forma nos ayudas a extender este contenido.

---

---

Utiliza Nuestro Buscador