Bagaimana untuk menggayakan CSS untuk hilang fokus

CSS hilang fokus

Dalam reka bentuk web, selalunya perlu menambah beberapa gaya untuk meningkatkan pengalaman interaksi pengguna. CSS ialah alat yang sangat berkuasa yang membolehkan kami mencapai pelbagai kesan dan animasi. Dalam CSS, terdapat keadaan yang dipanggil "keadaan fokus" (:fokus), yang menunjukkan bahawa pengguna sedang berinteraksi dengan elemen dan elemen itu "berfokus". Apabila anda memasukkan elemen dengan tetikus atau papan kekunci, elemen memperoleh fokus, dan apabila anda meninggalkan elemen, ia kehilangan fokus. Jadi, bagaimana untuk menggayakan CSS untuk hilang fokus?

1. Gaya fokus hilang biasa

1 Warna sempadan

Tambah jidar pada elemen dalam keadaan fokus. Apabila elemen kehilangan fokus, jadikan jidar ini warna yang sama dengan warna latar belakang elemen, atau jadikan ia lebih terang untuk menunjukkan bahawa elemen telah kehilangan fokus.

Sebagai contoh, kita boleh menambah gaya CSS berikut pada elemen input:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

Di sini kami menggunakan garis besar CSS dan sifat sempadan untuk mencapai ini. Apabila elemen input tidak difokuskan, jidarnya berwarna kelabu apabila elemen input difokuskan, jidarnya menjadi hitam.

Perlu diingatkan di sini bahawa kami menggunakan outline:none untuk membatalkan bingkai bertitik dalam keadaan fokus lalai, jika tidak, ia akan menyebabkan gangguan visual.

2. Warna latar belakang

Apabila elemen memperoleh fokus, tetapkan warna latar belakang untuknya apabila elemen hilang fokus, pulihkan warna latar belakang kepada warna asalnya.

Sebagai contoh, apabila pengguna memasukkan kandungan dalam kotak input, warna latar belakang kotak input boleh ditukar apabila pengguna menyerahkan borang, warna latar belakang kotak input boleh dipulihkan.

input:focus {
    background-color: #fff;
}

input {
    background-color: #f6f6f6;
}

3. Warna fon

Apabila elemen memperoleh fokus, tetapkan warna yang berbeza untuk teksnya apabila elemen kehilangan fokus, pulihkan warna teks kepada warna asalnya.

Sebagai contoh, kita boleh menambah gaya CSS berikut pada elemen input:

input:focus {
    color: #333;
}

input {
    color: #666;
}

Apabila elemen input difokuskan, warna teksnya akan berubah menjadi hitam apabila elemen input hilang fokus, , warna teks akan kembali kepada kelabu asalnya.

2. Gunakan pseudo-class untuk melaksanakan gaya luar fokus

Beberapa gaya out-of-focus yang biasa disebut di atas, semua gaya ini dilaksanakan melalui pseudo- CSS. kelas. Kelas pseudo CSS merujuk kepada set pemilih khas yang tidak memilih elemen itu sendiri, tetapi memilih keadaan elemen tertentu. Sebagai contoh, kita boleh menggunakan pemilih :focus untuk menggayakan keadaan fokus elemen dan pemilih :hover untuk menggayakan keadaan tuding elemen.

Oleh kerana kelas pseudo boleh menetapkan gaya berbeza untuk keadaan elemen yang berbeza, ia sangat sesuai untuk melaksanakan gaya fokus hilang. Berikut ialah beberapa kelas pseudo biasa dan penggunaannya:

1 :fokus

Pemilih kelas pseudo ini digunakan untuk memilih elemen yang sedang difokuskan. Apabila pengguna mengklik atau menekan kekunci Tab untuk memasukkan elemen, elemen akan berada dalam fokus, sekali gus mencetuskan gaya :focus.

Sebagai contoh, kita boleh menambah gaya CSS berikut pada elemen input:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

2 :aktif

Pemilih kelas pseudo ini digunakan untuk memilih elemen yang diklik pada masa ini. Apabila pengguna mengklik pada elemen dengan tetikus, elemen tersebut menjadi aktif, mencetuskan gaya :active.

Sebagai contoh, kita boleh menambah gaya CSS berikut pada butang:

button:active {
    background-color: #f00;
}

button {
    background-color: #ccc;
}

Apabila pengguna mengklik butang, warna latar belakang butang akan bertukar kepada merah.

3. :dilawati

Pemilih kelas pseudo ini digunakan untuk memilih elemen pautan yang dilawati. Apabila pengguna mengklik pada pautan, pautan itu akan dilawati, sekali gus mencetuskan gaya :visited.

Sebagai contoh, kita boleh menambah gaya CSS berikut pada pautan yang dilawati:

a:visited {
    color: #999;
}

Apabila pengguna melawati pautan ini, warna pautan akan bertukar menjadi kelabu.

3. Ringkasan

Keadaan fokus CSS ialah keadaan yang sangat berguna dan sering digunakan dalam reka bentuk web. Menambah gaya keadaan fokus pada elemen boleh menjadikan pengguna lebih intuitif menyedari elemen yang mereka sedang berinteraksi, sekali gus meningkatkan pengalaman interaksi. Sama ada warna sempadan, warna latar belakang atau warna teks, reka bentuk kehilangan gaya fokus boleh dicapai melalui pemilih kelas pseudo CSS. Menguasai kemahiran ini, saya percaya anda boleh menjadikan reka bentuk web anda lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menggayakan CSS untuk hilang fokus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!