Hola amigos lectores, un saludo a todos, ya casi se termina el 2021, he aprovecha el tiempo libre para estudiar un poco de React y que mejor que un desafío para poner los conocimientos en práctica.

Pero bien, no voy hablar sobre React sino, sobre CSS y como hacer una caja de búsqueda (input group) con un campo de texto y un botón utilizando solamente CSS.

El procedimiento es muy sencillo. A continuación tenemos un componente muy sencillo de React que se encarga de renderizar un input con un button.

import style from '../css/main.module.scss'

export default function SearchForm () {
  return (
    <div className={ style.form }>
      <input placeholder='IP Address' className={ style.form__input } name="search"/>
      <button className={ style.form__btn} ></button>
    </div>
  )
}

Ahora tenemos que crear tres clases de CSS para darle forma a nuestro buscador.

.form {
  // Centramos el contenido con flex-box
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 2px;
}

.form__input {
  // Establecemos un padding en el input de 10px
  padding: 10px;
  // Redondeamos los bordes del input por la izquierda a 5px 
  border-radius: 5px 0px 0px 5px;
  // Eliminamos el border del input 
  border: none;
}

// Elimina el outline del input al tomar el focus
.form__input:focus { 
  outline: none;
}

.form__btn {
  // Color del fondo negro
  background: black;
  // Color del texto blanco
  color: white;
  // Eliminamos el border
  border: none;
  // Redondeamos el input por la derecha a 5px
  border-radius: 0px 5px 5px 0px;
  // Ancho de 40px
  width: 40px;
  // Imagen de fondo
  background-image: url('../assets/images/icon-arrow.svg');
  background-repeat: no-repeat;
  // Centramos la imagen
  background-position-x: center;
  background-position-y: center;
}

Eso es todo, un tip sencillo para implementar input con un botón de acción.