Roylan Suarez Reyes
Roylans.dev - Blog sobre desarrollo web

Follow

Roylans.dev - Blog sobre desarrollo web

Follow
Como crear un input con un botón de acción

Como crear un input con un botón de acción

Roylan Suarez Reyes's photo
Roylan Suarez Reyes
·Dec 17, 2021·

2 min read

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.

image.png

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.

Did you find this article valuable?

Support Roylan Suarez Reyes by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this