kotak teks set css

Dalam pembangunan web, kotak teks ialah kawalan input pengguna biasa. Melalui gaya CSS, kami boleh mempelbagaikan tetapan kotak teks, termasuk warna, saiz, fon, sempadan, dll. Dalam artikel ini, kami akan memperkenalkan anda secara terperinci cara menggunakan CSS untuk menetapkan kotak teks untuk membantu anda membina halaman web yang lebih cantik dan praktikal.

1. Tetapkan saiz kotak teks

Untuk menetapkan saiz kotak teks, kita boleh menggunakan sifat lebar dan ketinggian dalam CSS. Sebagai contoh, kod berikut akan menetapkan lebar kotak teks kepada 200 piksel dan ketinggian kepada 30 piksel:

input[type="text"] {
    width: 200px;
    height: 30px;
}

Selain itu, kami juga boleh menetapkan saiz maksimum kotak teks menggunakan lebar maksimum dan sifat ketinggian maksimum CSS untuk Memastikan kotak teks menyesuaikan diri dengan saiz skrin yang berbeza:

input[type="text"] {
    max-width: 100%;
    height:30px;
}

2. Tetapkan warna kotak teks

Warna kotak teks ialah satu faktor penting dalam mencantikkan kita. Kita boleh menggunakan sifat warna latar belakang CSS untuk menetapkan warna latar belakang kotak teks dan sifat warna untuk menetapkan warna teks dalam kotak teks. Sebagai contoh, kod berikut akan menetapkan warna latar belakang kepada kelabu dan warna teks kepada hitam untuk kotak teks:

input[type="text"] {
    background-color: #ccc;
    color: #000;
}

3. Tetapkan fon kotak teks

Sama sebagai warna kotak teks, fon Ia juga merupakan salah satu faktor penting dalam mencantikkan kotak teks. Kita boleh menggunakan sifat fon-keluarga CSS untuk menetapkan fon teks dalam kotak teks, dan sifat saiz fon untuk menetapkan saiz fon. Sebagai contoh, kod berikut akan menetapkan fon untuk kotak teks kepada Microsoft Yahei dan saiz fon kepada 14pt:

input[type="text"] {
    font-family: "Microsoft YaHei",Arial,sans-serif;
    font-size: 14pt;
}

4. Tetapkan sempadan kotak teks

Tetapan daripada sempadan kotak teks juga teks Salah satu faktor penting dalam pengindahan bingkai. Kita boleh menggunakan sifat sempadan CSS untuk menetapkan gaya, lebar dan warna sempadan kotak teks. Sebagai contoh, kod berikut akan menetapkan sempadan kotak teks kepada garis pepejal, lebar 1 piksel dan warna kelabu:

input[type="text"] {
    border: 1px solid #ccc;
}

Selain itu, kita juga boleh menggunakan sifat jejari sempadan CSS untuk menetapkan sempadan bulat kotak teks , untuk meningkatkan estetika kotak teks.

input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 5px;
}

5. Tetapkan gaya fokus kotak teks

Apabila kotak teks mendapat fokus, kita boleh menetapkan gaya yang berbeza untuk membezakannya daripada kotak teks lain. Kita boleh menggunakan kelas pseudo :focus CSS untuk menggayakan kotak teks apabila ia mendapat fokus. Contohnya, kod berikut akan menetapkan warna latar belakang kotak teks kepada kuning apabila ia menerima fokus:

input[type="text"]:focus {
    background-color: yellow;
}

6. Tetapkan keadaan dilumpuhkan kotak teks

Dalam sesetengah kes, kami Kotak teks perlu ditetapkan kepada keadaan dilumpuhkan untuk menghalang pengguna daripada menaip. Kita boleh menggunakan CSS :disabled pseudo-class untuk menetapkan gaya disabled kotak teks. Contohnya, kod berikut akan menetapkan warna latar belakang kepada kelabu dan warna teks kepada kelabu muda untuk kotak teks yang dilumpuhkan:

input[type="text"]:disabled {
    background-color: #eee;
    color: #ccc;
}

7. Tetapan gaya komprehensif

Akhir sekali, kita boleh menambah Gaya di atas digabungkan untuk menetapkan gaya lengkap untuk kotak teks. Contohnya, kod berikut akan menyediakan kotak teks sepenuhnya:

input[type="text"] {
    width: 200px;
    height: 30px;
    padding: 5px 10px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14pt;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="text"]:focus {
    background-color: #fff;
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.6);
}

input[type="text"]:disabled {
    background-color: #eee;
    color: #ccc;
}

Dalam artikel ini, kami menerangkan secara terperinci cara menyediakan kotak teks menggunakan gaya CSS. Melalui tetapan gaya ini, kami boleh menjadikan kotak teks lebih cantik dan praktikal, serta meningkatkan pengalaman pengguna. Saya harap artikel ini dapat membantu kerja anda dalam pembangunan web.

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