Cách tạo form có icon (input với icon) bằng CSS

Giới thiệu

Input có icon (icon inside input) giúp người dùng nhận diện nhanh loại dữ liệu (user, email, lock, calendar). CSS dùng position: absolute cho icon và padding-left cho input để chừa chỗ.

Ví dụ hoàn chỉnh - Form đăng ký có icon

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form với Icon</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f5f7fa; padding: 40px 20px; }
    .form-card {
      max-width: 440px;
      margin: 0 auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      padding: 40px;
    }
    h1 { text-align: center; margin: 0 0 28px; font-size: 26px; color: #1a1a1a; }
    .input-group {
      position: relative;
      margin-bottom: 20px;
    }
    .input-group .icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #888;
      pointer-events: none; /* Click xuyên icon vào input */
      transition: color 0.2s;
    }
    .input-group input {
      width: 100%;
      padding: 14px 16px 14px 48px; /* Padding-left chừa chỗ icon */
      font-size: 16px;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      background: #fafafa;
      transition: all 0.2s;
    }
    .input-group input:focus {
      outline: none;
      border-color: #1eadef;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(30, 173, 239, 0.15);
    }
    .input-group input:focus + .icon,
    .input-group:focus-within .icon { color: #1eadef; }
    .input-group input::placeholder { color: #aaa; }
    .btn-submit {
      width: 100%;
      padding: 16px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, #1eadef, #512c94);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.2s;
    }
    .btn-submit:hover { box-shadow: 0 6px 20px rgba(30,173,239,0.3); }
    .btn-submit:active { transform: scale(0.98); }
    @media (max-width: 480px) {
      .form-card { padding: 24px; }
    }
  </style>
</head>
<body>
  <div class="form-card">
    <h1>Tạo tài khoản</h1>
    <form>
      <div class="input-group">
        <input type="text" id="username" name="username" placeholder="Tên người dùng" required autocomplete="username">
        <i class="fas fa-user icon" aria-hidden="true"></i>
      </div>
      <div class="input-group">
        <input type="email" id="email" name="email" placeholder="Email" required autocomplete="email">
        <i class="fas fa-envelope icon" aria-hidden="true"></i>
      </div>
      <div class="input-group">
        <input type="password" id="password" name="password" placeholder="Mật khẩu" required autocomplete="new-password">
        <i class="fas fa-lock icon" aria-hidden="true"></i>
      </div>
      <div class="input-group">
        <input type="text" id="dob" name="dob" placeholder="Ngày sinh (dd/mm/yyyy)" autocomplete="bday">
        <i class="fas fa-calendar-alt icon" aria-hidden="true"></i>
      </div>
      <button type="submit" class="btn-submit">Đăng ký</button>
    </form>
  </div>
</body>
</html>

Cấu trúc HTML chuẩn

<div class="input-group">
  <input type="..." id="..." name="..." placeholder="...">
  <i class="fas fa-icon icon" aria-hidden="true"></i>
</div>

• Icon đặt sau input trong DOM để dùng :focus-within hoặc adjacent sibling + selector.
• aria-hidden="true": Ẩn icon khỏi screen reader (đã có label).
• pointer-events: none: Click icon vẫn focus vào input.

Biến thể: Icon bên phải (Trailing Icon)

Dùng cho toggle password, clear input, dropdown select:

.input-group.trailing .icon { left: auto; right: 16px; }
.input-group.trailing input { padding-left: 16px; padding-right: 48px; }

<div class="input-group trailing">
  <input type="password" id="pwd" placeholder="Mật khẩu">
  <button type="button" class="icon toggle-pwd" aria-label="Hiện/ẩn mật khẩu">
    <i class="fas fa-eye"></i>
  </button>
</div>

Best Practices

• Icon size: 18-20px, màu xám (#888) mặc định, đổi màu primary khi focus.
Padding-left input: ≥ 44px (icon 20px + gap 8px + padding 16px).
• Dùng :focus-within trên wrapper để đổi màu icon khi input focus (hỗ trợ tốt hơn +).
• Trailing icon dùng <button> nếu có hành động (toggle, clear), không dùng <i>.