Cara Mengalih Keluar Anak Panah pada Nombor jenis Input dengan CSS Tailwind

Apabila mereka bentuk borang dengan CSS Tailwind, anda mungkin mahu mengalih keluar anak panah lalai (juga dikenali sebagai pemutar) daripada medan input nombor. Anak panah ini boleh mengganggu reka bentuk tersuai dan mencabar untuk digayakan secara konsisten merentas penyemak imbas yang berbeza.

Dalam tutorial ini, kami akan meneroka cara untuk mencapai ini menggunakan CSS Tailwind, kedua-duanya dengan gaya sebaris dan melalui pendekatan CSS global.

Masalahnya

Secara lalai, penyemak imbas menambah anak panah kenaikan dan penurunan pada elemen. Walaupun berfungsi, anak panah ini sering bertembung dengan reka bentuk tersuai dan sukar untuk digayakan secara seragam merentas pelbagai penyemak imbas.

Penyelesaian

Kami akan menggunakan kelas utiliti CSS Tailwind untuk mengalih keluar anak panah ini dan mencipta input nombor yang bersih dan disesuaikan. Kami juga akan melihat cara menggunakan penggayaan ini secara global untuk projek yang lebih besar.

Pendekatan Sebaris

Mari kita mulakan dengan contoh yang menggunakan kelas Tailwind sebaris:

<form class="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
  <div class="mb-4">
    <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
    <input type="number" id="quantity" name="quantity" 
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
  </div>

  <div class="mb-4">
    <label for="price" class="block text-sm font-medium text-gray-700 mb-2">Price</label>
    <input type="number" id="price" name="price" step="0.01"
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
  </div>

  <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
    Submit
  </button>
</form>

Kelas utama untuk mengalih keluar anak panah ialah:

• [appearance:textfield]: Mengalih keluar penggayaan lalai dalam Firefox.
• [&::-webkit-outer-spin-button]:appearance-none: Mengalih keluar butang putaran luar dalam penyemak imbas WebKit.
• [&::-webkit-inner-spin-button]:appearance-none: Mengalih keluar butang spin dalam dalam penyemak imbas WebKit.

Pendekatan Global

Untuk projek yang lebih besar, anda mungkin mahu menggunakan penggayaan ini pada semua input nombor. Anda boleh melakukan ini dengan menambahkan gaya pada fail CSS global anda:

1. Buka fail global.css anda (atau yang setara, seperti app.css atau styles.css) bergantung pada rangka kerja dan persediaan anda.

2. Tambah CSS berikut:
   

/* In your global.css file */
@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

1. Pastikan fail CSS ini diimport dalam fail CSS Tailwind utama anda atau disertakan dalam HTML anda.

Selepas menambah gaya global ini, anda boleh memudahkan HTML anda:

<form class="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
  <div class="mb-4">
    <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
    <input type="number" id="quantity" name="quantity" 
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
  </div>

  <div class="mb-4">
    <label for="price" class="block text-sm font-medium text-gray-700 mb-2">Price</label>
    <input type="number" id="price" name="price" step="0.01"
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
  </div>

  <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
    Submit
  </button>
</form>

Perhatikan bahawa kami telah mengalih keluar kelas pengalih keluar anak panah daripada input individu, kerana ia kini dikendalikan oleh CSS global.

Menambah Anak Panah Tersuai

Sambil mengalih keluar anak panah lalai meningkatkan ketekalan reka bentuk, anda mungkin mahu menambah butang kenaikan/penurunan tersuai untuk pengalaman pengguna yang lebih baik. Begini cara membuat anak panah tersuai yang sepadan dengan reka bentuk borang kami:

<div class="mb-4">
  <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
  <div class="relative">
    <input type="number" id="quantity" name="quantity" 
      class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm shadow-sm
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
    <div class="absolute inset-y-0 right-0 flex items-center">
      <button type="button" class="px-2 h-full border-l border-gray-300 text-gray-500 hover:text-sky-500 focus:outline-none"
              onclick="document.getElementById('quantity').stepUp()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
        </svg>
      </button>
      <button type="button" class="px-2 h-full border-l border-gray-300 text-gray-500 hover:text-sky-500 focus:outline-none"
              onclick="document.getElementById('quantity').stepDown()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </button>
    </div>
  </div>
</div>

Mari kita pecahkan komponen utama pelaksanaan ini:

1. Kami membalut input dalam div berkedudukan relatif untuk membenarkan kedudukan mutlak butang tersuai kami.

2. Medan input mengekalkan gaya asalnya, termasuk kelas untuk mengalih keluar anak panah lalai:
   

   [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none

1. Kami menambah div dengan kedudukan mutlak untuk mengandungi butang tersuai kami:

   <div class="absolute inset-y-0 right-0 flex items-center">

Ini meletakkan butang di sebelah kanan input dan memusatkannya secara menegak.

1. Setiap butang digayakan untuk digabungkan dengan input:

   <button type="button" class="px-2 h-full border-l border-gray-300 text-gray-500 hover:text-sky-500 focus:outline-none">

• h-full menjadikan butang mengisi ketinggian input.
• border-l menambah pemisah halus antara butang.
• text-gray-500 dan hover:text-sky-500 memberikan perubahan warna pada hover yang sepadan dengan keadaan fokus borang kami.

1. Kami menggunakan ikon SVG untuk anak panah atas dan bawah, bersaiz sesuai dengan w-4 h-4.

2. Acara onclick menggunakan kaedah stepUp() dan stepDown() JavaScript untuk menukar nilai input:
   

   onclick="document.getElementById('quantity').stepUp()"
   onclick="document.getElementById('quantity').stepDown()"

Pertimbangan Penting

Ada beberapa perkara yang perlu anda pertimbangkan:

1. Mengalih keluar anak panah boleh menjejaskan pengguna yang bergantung padanya. Pertimbangkan untuk menyediakan kaedah kenaikan/penurunan alternatif jika perlu.

2. Penyelesaian ini berfungsi dalam penyemak imbas moden. Penyemak imbas lama mungkin memerlukan CSS atau JavaScript tambahan.

Kesimpulan

Dengan melaksanakan ini, sama ada sebaris atau global, anda boleh mengalih keluar anak panah lalai dengan berkesan daripada input nombor merentas projek anda.

Bagi mereka yang ingin menambah baik proses pembangunan CSS Tailwind mereka dengan lebih lanjut, lihat pembina halaman DevDojo Tails, yang boleh membantu anda mencipta reka bentuk yang menakjubkan dengan mudah.

Selamat mengekod!

Atas ialah kandungan terperinci Cara Mengalih Keluar Anak Panah pada Nombor jenis Input dengan CSS Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!