Bagaimana untuk Menggayakan Medan Input Tunggal sebagai Input Berparti?

Menggayakan Medan Input sebagai Input Berparti

Banyak kaedah wujud untuk mencipta satu siri medan input terbahagi. Satu kaedah menggunakan "jarak huruf" untuk memisahkan aksara dalam satu medan input. Selain itu, penggayaan "imej latar belakang" dan "bawah-sempadan" boleh meningkatkan lagi ilusi medan input berbilang.

Snippet CSS

Kod CSS berikut menunjukkan cara untuk mencipta kesan yang diingini:

<code class="css">#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline: none;
}</code>

Pelaksanaan HTML

Untuk menggunakan CSS ini, cuma tambah kod HTML berikut pada halaman anda:

<code class="html"><input id="partitioned" type="text" maxlength="4" /></code>

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Medan Input Tunggal sebagai Input Berparti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!