Mengapa Tidak Akan ::selepas Paparan Kandungan untuk Elemen Input dalam HTML5?

Elemen Pseudo CSS untuk Medan Input

Dalam HTML5, menambah isyarat visual untuk membentuk input menggunakan elemen pseudo CSS boleh meningkatkan pengalaman pengguna. Seseorang mungkin cuba menggunakan ::before dan ::after pseudo-elemen untuk penggayaan, seperti yang dilihat dalam contoh berikut:

<code class="css">input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }</code>

Walau bagaimanapun, seseorang mungkin menghadapi kesukaran untuk memaparkan ::after content untuk elemen input . Walaupun menggunakan kedua-dua titik bertindih tunggal dan berganda, mengalih keluar kelas pseudo dan bereksperimen dengan penyemak imbas yang berbeza, kandungannya tetap tidak kelihatan.

Sementara ::selepas elemen pseudo berfungsi dengan lancar pada elemen seperti div, span, p dan q, ini tidak berlaku untuk elemen input. Tingkah laku ini berpunca daripada atribut asas elemen ini: mereka kekurangan kandungan pokok dokumen.

Peranan Kandungan Elemen

Mengikut spesifikasi CSS (http:// www.w3.org/TR/CSS21/generate.html), ::selepas pseudo-elements secara eksplisit memerlukan elemen dengan kandungan pepohon dokumen untuk memaparkan kandungannya. Elemen input, serupa dengan img dan br, tidak mengandungi kandungan sedemikian. Oleh itu, mengikut reka bentuk, penyemak imbas tidak akan memaparkan ::selepas kandungan untuk medan input.

Atas ialah kandungan terperinci Mengapa Tidak Akan ::selepas Paparan Kandungan untuk Elemen Input dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!