Bagaimanakah Saya Boleh Menambah Ikon Jelas pada Medan Input Teks dengan Mudah?

Mencipta Input Teks Jelas dengan Ikon

Dalam borang web, selalunya wajar untuk menyediakan cara intuitif untuk mengosongkan nilai input, terutamanya untuk elemen input teks. Ini boleh meningkatkan pengalaman pengguna dengan membenarkan pemadaman pantas input tanpa menggunakan navigasi kursor.

Penyelesaian berasaskan jQuery

jQuery menawarkan beberapa pemalam yang memudahkan penciptaan input elemen dengan ikon jelas bersepadu. Pemalam ini membenarkan kedudukan tepat ikon dalam medan input.

Pelaksanaan CSS Tersuai

Sebagai alternatif, anda boleh menggunakan CSS tersuai untuk mencipta ikon yang jelas tanpa bergantung pada perpustakaan pihak ketiga.

input[type=search] {
  padding-right: 20px;  /* Adjust as needed */
}

input[type=search]::after {
  content: "×";
  position: absolute;
  right: 5px;  /* Adjust as needed */
  top: 5px;  /* Adjust as needed */
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}

input[type=search]:focus::after {
  color: #000;
}

Menggunakan "carian" Atribut

Penyelesaian mudah ialah menambah atribut type="search" pada elemen input. Ini secara automatik akan memaparkan ikon yang jelas dalam pelayar moden. Walau bagaimanapun, perlu diingat bahawa kaedah ini tidak akan berfungsi dalam versi Internet Explorer sebelum 10.

<input type="search">

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Ikon Jelas pada Medan Input Teks dengan Mudah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!