react-input-chips/src/components/styles.css

A lightweight, dependency-free, and highly customizable React component for handling chip inputs.

.ric-chip-input-wrapper {
   gap: 4px;
   flex: 2;
   padding: 5px;
   overflow: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   border: 1px solid #BBBBBB;
   border-radius: 4px;
   max-width: 650px;
   min-width: 300px;
   transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

   &.ric-chip-input-wrapper-focus {
      border-color: #4a90e2;
      box-shadow: 0 0 0 1px #4a90e2;
   }

   .ric-chip {
      background: #e5e5e5;
      border-radius: 4px;
      color: #333333;
      display: flex;
      gap: 0.5rem;
      align-items: center;
      justify-content: space-between;
      max-width: max-content;
      padding: 6px;
   }

   .ric-chip-input {
      border: none;
      outline: none;
      flex: 1;
      padding: 0 8px;
      height: 30px;
   }

   .ric-closeBtn {
      outline: none;
      border: none;
      background: none;
      height: 18px;
      width: 18px;
      object-fit: cover;
      cursor: pointer;
      display: grid;
      place-items: center;
   }
}

.ric-chip-input-wrapper-error {
   border: 2px solid red
}

.ric-error-msg-wrapper {
   margin: 0;
   font-size: 12px;
   color: red
}