Tạo đầu vào số theo kiểu Tailwind CSS: Hướng dẫn từng bước

Đầu vào số rất hữu ích cho việc thu thập dữ liệu số từ người dùng. Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo đầu vào số theo kiểu Tailwind CSS bằng các nút tăng và giảm tùy chỉnh.

Đầu vào số rất hữu ích cho việc thu thập dữ liệu số từ người dùng. Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo đầu vào số theo kiểu Tailwind CSS bằng các nút tăng và giảm tùy chỉnh.

Tạo trường nhập số bằng CSS Tailwind có nghĩa là sử dụng HTML và các lớp tạo kiểu của Tailwind để tạo kiểu cho dữ liệu nhập theo một cách cụ thể.

<input
  type="number"
  class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300"
  placeholder="Enter number"
/>

Trường nhập được tạo kiểu cho số, có phần đệm, đường viền, các góc được làm tròn, không có đường viền trên tiêu điểm và vòng tiêu điểm màu xanh lam.

Phong cách hiện đại với bóng tối

<input
  type="number"
  class="w-full px-4 py-2 text-gray-700 bg-white border rounded-md focus:border-blue-500 focus:bg-white focus:outline-none shadow"
  placeholder="Enter number"
/>

Nhập số điện thoại

<div class="flex border border-gray-300 rounded-md">
  <span class="flex items-center bg-gray-100 border-r px-3 text-gray-600">
    +1
  </span>
  <input
    type="tel"
    class="flex-1 min-w-0 px-4 py-2 focus:ring-blue-500 focus:border-blue-500 rounded-r-md"
    placeholder="Phone number"
  />
</div>

Nhập số điện thoại CSS Tailwind bằng Bộ chọn mã quốc gia

<div class="flex border border-gray-300 rounded-md">
  <select class="bg-gray-100 border-r px-2 text-gray-700 focus:outline-none rounded-l-md">
    <option value="+1">+1</option>
    <option value="+44">+44</option>
    <option value="+91">+91</option>
    <!-- Add more country codes as needed -->
  </select>
  <input type="tel" class="flex-1 px-4 py-2 focus:ring-blue-500 focus:border-blue-500 rounded-r-md"
    placeholder="Phone number" />
</div>

Tailwind CSS Nhập số điện thoại với biểu tượng điện thoại (Sử dụng Heroicons)

<div class="flex items-center border border-gray-300 rounded-md">
  <span class="px-3 border-r">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="w-5 h-5 text-gray-500"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
      />
    </svg>
  </span>
  <input
    type="tel"
    class="flex-1 px-4 py-2 focus:ring-blue-500 focus:border-blue-500 rounded-r-md"
    placeholder="Phone number"
  />
</div>

#tailwindcss