input-field-zn/src/index.css

A lightweight and customizable React input field component with built-in icons for user, email, and password inputs. Includes password visibility toggle (eye/eye-slash) and modern styling support for easy integration in any form.

.inf-container {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 7px;
  background: #fff;
}
.inf-input {
  border: none;
  width: 100%;
  height: 100%;
  font-size: 14px;
  outline: none;
  background: initial;
}
.inf-img {
  position: absolute;
}
.inf-eye-slash {
  cursor: pointer;
  position: absolute;
  right: 10px;
  width: 20px;
  top: 8px;
  transition: all 0.3s ease;
}
/* Hide number input arrows in Chrome, Safari, Edge, and Opera */
.inf-input[type="number"]::-webkit-inner-spin-button,
.inf-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide number input arrows in Firefox */
.inf-input[type="number"] {
  -moz-appearance: textfield;
}