Tweak akhir gaya pengesahan

Untuk memaksimumkan kefungsian sambil menambah gaya yang tiada, ingat prinsip utama ini: Jangan anggap.

Ini bermakna kami boleh menggunakan pembolehubah CSS untuk pelapik relatif, jidar, jidar dan warna, tetapi kami tidak akan menentukan rupa kotak pilihan. Itu keputusan penggayaan peringkat projek, bukan keputusan khusus elemen. (Sesetengah sistem reka bentuk, seperti Reka Bentuk Bahan, sangat menggayakan setiap elemen, menghalang penggunaan semula komponen individu.)

Penggayaan Kotak Semak

Untuk kotak pilihan, hanya tukar kotak pilihan dan labelkan kedudukan. Biarkan reka bentuk projek keseluruhan mengendalikan penampilan kotak pilihan. Terdapat dua pendekatan: kaedah yang mudah dan yang lebih kompleks. Pendekatan kompleks menggunakan CSS seperti ini:

<code class="language-css">.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}</code>

Penyelesaian yang lebih mudah melibatkan secara eksplisit memberikan sifat jenis baharu kepada cr-field:

<code class="language-html"><!-- input.partial -->
<div class="cr-field cr-checkbox">
  <!-- ... -->
</div></code>

Kemudian, gunakan CSS yang kurang kompleks ini:

<code class="language-css">.cr-field.cr-checkbox {
  .cr-label {
    /* Same as above */
  }
  .cr-input {
    /* Same as above */
  }
  .cr-feedback {
    margin-block-start: 0;
    float: none;
  }
  .cr-required {
    position: static;
  }
}</code>

Pemilih yang lebih ringkas ini memberikan lebih fleksibiliti untuk menggayakan elemen lain seperti asterisk yang diperlukan, teks bantuan dan mesej maklum balas. Kadangkala, pendekatan yang kurang rumit adalah lebih baik.

Mengatasi Kes Edge

Satu senario melibatkan asterisk yang diperlukan yang dikaburkan, diposisikan paling kanan. Tanpa mengubah komponen pustaka atau CSS dikongsi, kami boleh meningkatkan keterlihatannya dengan menggayakan bekasnya:

<code class="language-css">/* Set container width to c-5 and display as block */</code>

Ini melibatkan:

1. Menetapkan lebar bekas kepada peratusan yang diingini dan menukar paparannya kepada block (Komponen sudut lalai kepada contents).
2. Melaraskan lebar komponen dalam kepada 50% setiap satu.
3. Mengemas kini mesej ralat kepada "Tambah tarikh pada masa hadapan", merangkumi kedua-dua tarikh tamat tempoh dan peraturan nilai yang diperlukan.

Penggayaan Kotak Semak Tersuai

Projek selalunya mempunyai gaya kotak pilihan yang unik. Menggunakan CSS sedia ada, mari kita gayakan kotak pilihan menggunakan contoh MDN:

<code class="language-css">.gr-something .cr-field.cr-checkbox {
  .cr-input {
    /* Remove default appearance */
    appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    transition: all 0.4s;
  }
  /* ...rest of MDN-based styles... */
}</code>

Ini menunjukkan bahawa mengelakkan pemilih yang terlalu kompleks menghalang konflik CSS.

Medan Tersembunyi dan Auto-isi

Input tersembunyi memudahkan pengesahan. Jika dalam cr-field, pengesahan adalah mudah. Untuk input tersembunyi di luar konteks ini, kami memperkenalkan atribut dan gaya type="hidden" dengan sewajarnya:

<code class="language-css">.cr-field.cr-hidden {
  .cr-label {
    display: none;
  }
  .cr-input[required] ~ .cr-required {
    display: none;
  }
  .cr-feedback {
    float: none;
    margin-block-start: 0;
    margin-inline-start: 0;
  }
}</code>

Untuk medan yang diisi secara automatik, kami menggunakan type="static" untuk mengelakkan pertindihan label pemegang tempat:

<code class="language-css">.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}</code>

Kesimpulan

Matlamat kami ialah: input HTML asli, peraturan pengesahan minimum, bentuk Sudut yang fleksibel, penggayaan berasaskan atribut, penyerahan borang longgar dan penggayaan minimum yang boleh diganti. Kami percaya kami telah mencapai objektif ini.

Atas ialah kandungan terperinci Tweak akhir gaya pengesahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!