kotak teks css baca sahaja

Dalam reka bentuk laman web, kami sering menggunakan kotak teks untuk menyimpan maklumat yang dimasukkan oleh pengguna. Dalam sesetengah kes, kami berharap kotak teks ini hanya boleh digunakan untuk memaparkan maklumat dan tidak boleh diubah suai. Pada masa ini, anda perlu menggunakan sifat baca sahaja CSS.

Dalam HTML, kami biasanya menggunakan teg input untuk membuat kotak teks. Antaranya, atribut jenis boleh menetapkan jenis kotak input, seperti kotak teks, kotak kata laluan, e-mel, dll. Untuk membuat kotak teks baca sahaja, kita perlu menetapkan sifat baca sahaja kepada benar. Berikut ialah contoh:

Dalam kod di atas, nilai kotak teks ialah " johndoe" ”, atribut baca sahaja ditetapkan kepada benar, iaitu status baca sahaja.

Sekarang, mari lihat cara membuat kotak teks baca sahaja melalui CSS. Mula-mula, kita perlu mencari elemen input dalam HTML dan kemudian gunakan pemilih atribut untuk memilih kotak teks baca sahaja. Pemilih atribut boleh memilih elemen berdasarkan nilai atributnya Sintaksnya ialah attribute=value. Contohnya, untuk memilih kotak teks baca sahaja, kita boleh menggunakan kod berikut:

input[readonly] {

background-color: #eee;

}

Kod di atas akan memilih semua kotak teks yang mempunyai baca sahaja Warna latar belakang elemen input atribut ditetapkan kepada kelabu. Jika anda hanya mahu memilih jenis kotak teks tertentu, anda boleh menulis seperti ini:

inputtype="text" {

background-color: #eee;

}

Ini akan memilih semua jenis atribut sebagai elemen input "teks" dengan atribut baca sahaja ditetapkan kepada benar dan tetapkan warna latar belakangnya kepada kelabu. Jika anda ingin mengehadkan lagi pemilihan, anda boleh menggunakan pemilih lain, seperti pemilih kelas atau ID.

Selain menukar warna latar belakang, anda juga boleh menggunakan gaya CSS lain untuk memaparkan kotak teks baca sahaja. Contohnya, anda boleh menukar warna, sempadan, fon, dsb. kotak teks. Berikut ialah beberapa gaya kotak teks baca sahaja biasa:

/ Jadikan kotak teks tidak boleh diedit/
input[baca sahaja] {

-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;

}

/ Alih keluar sempadan kotak teks/
input[baca sahaja] {

border: none;

}

/ Tukar warna latar belakang dan warna fon daripada kotak teks dan saiz fon/
input[baca sahaja] {

background-color: #f0f0f0;
color: #333;
font-size: 14px;

}

Ringkasnya, menggunakan sifat baca sahaja CSS, anda boleh membuat kotak teks baca sahaja Ini memastikan maklumat yang dimasukkan oleh pengguna tidak diubah suai. Dengan melaraskan gaya CSS, kami juga boleh menukar kesan paparan kotak teks untuk menjadikannya lebih konsisten dengan gaya reka bentuk tapak web.

Atas ialah kandungan terperinci kotak teks css baca sahaja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!