CSS Input Styler

/* Modern Form Input & Focus States */
.util-input {
  width: 100%;
  background-color: #0a0a0f;
  color: #e4e1e9;
  border: 1px solid #35343a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.util-input::placeholder {
  color: #71717a;
}

.util-input:hover {
  border-color: #f5c84280;
}

.util-input:focus {
  border-color: #f5c842;
  box-shadow: 0 0 0 3px #f5c84233, 0 0 20px #f5c84225;
}

.util-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.util-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px #ef444433;
}

/* Pure CSS Floating Label Animation */
.floating-wrapper {
  position: relative;
  padding-top: 1.25rem;
}

.floating-label {
  position: absolute;
  top: 1.25rem;
  left: 16px;
  color: #71717a;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease;
  transform-origin: left top;
}

.util-input:focus ~ .floating-label,
.util-input:not(:placeholder-shown) ~ .floating-label {
  transform: translateY(-1.2rem) scale(0.78);
  color: #f5c842;
}