Gunakan pemilih kelas pseudo :enabled untuk menukar gaya elemen bentuk yang tersedia

Gunakan pemilih kelas pseudo yang didayakan untuk menukar gaya elemen borang yang tersedia Contoh kod khusus diperlukan

Dalam pembangunan web, elemen borang merupakan bahagian yang sangat diperlukan. Apabila mereka bentuk borang, kita selalunya perlu menukar gaya elemen borang berdasarkan statusnya untuk meningkatkan pengalaman pengguna. Dalam hal ini, pemilih kelas pseudo CSS memberikan kami penyelesaian yang baik Salah satu pemilih kelas pseudo yang biasa digunakan ialah: didayakan.

: Pemilih kelas pseudo yang didayakan digunakan untuk memilih elemen borang yang tersedia Dengan menetapkan gaya khusus untuk elemen ini, kami boleh membezakan elemen bentuk yang tersedia dan tidak tersedia, dengan itu menyediakan antara muka pengguna yang lebih mesra dan intuitif.

Berikut ialah beberapa contoh kod konkrit yang menunjukkan cara menggunakan pemilih kelas pseudo :enabled untuk menukar gaya elemen bentuk yang tersedia. Mula-mula, kita boleh menghasilkan elemen bentuk dengan menetapkan beberapa gaya asas:

input, select, textarea {
  padding: 10px;
  border: 1px solid #ccc;
}

select {
  width: 200px;
}

textarea {
  resize: vertical;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

Seterusnya, kita boleh menggunakan pemilih kelas pseudo :enabled untuk membezakan antara elemen borang yang tersedia dan tidak tersedia dan menetapkan gaya yang berbeza untuknya. Contohnya:

input:enabled, select:enabled, textarea:enabled {
  background-color: white;
  color: black;
}

input:disabled, select:disabled, textarea:disabled {
  background-color: #f9f9f9;
  color: #aaa;
}

Dengan kod di atas, kami menetapkan warna latar belakang unsur bentuk yang tersedia kepada putih dan warna fon kepada hitam, manakala warna latar belakang unsur bentuk yang tidak tersedia ditetapkan kepada kelabu dan warna fon ditetapkan kepada kelabu muda . Dengan cara ini, pengguna boleh membezakan dengan jelas antara elemen borang yang tersedia dan tidak tersedia semasa mengisi borang.

Selain itu, kami juga boleh menggunakan pemilih kelas pseudo :enabled untuk menetapkan gaya lain untuk elemen bentuk yang tersedia, seperti menukar warna jidar, melaraskan saiz fon, dsb. Contohnya:

input:enabled {
  border-color: #4CAF50;
}

select:enabled {
  outline: 2px solid #4CAF50;
  font-size: 16px;
}

textarea:enabled {
  border-color: #4CAF50;
  font-family: Arial, sans-serif;
}

Dengan kod di atas, kami menetapkan warna sempadan hijau untuk kotak input teks yang tersedia, menetapkan sempadan luar hijau dan melaraskan saiz fon untuk menu lungsur yang tersedia, dan menetapkan warna hijau untuk yang tersedia. warna sempadan kotak teks berbilang baris dan gaya fon.

Ringkasnya, menggunakan pemilih kelas pseudo :enabled boleh membantu kami membezakan antara elemen bentuk yang tersedia dan tidak tersedia, dengan itu menyediakan antara muka pengguna yang lebih intuitif dan mesra. Dengan menetapkan gaya yang berbeza, kami boleh memberitahu pengguna dengan jelas elemen bentuk yang boleh memasukkan data dan unsur bentuk yang tidak tersedia. Kaedah menukar gaya elemen borang ini boleh meningkatkan kecekapan dan pengalaman pengguna mengisi borang dengan banyak. Saya harap artikel ini dapat membantu anda memahami dan menggunakan pemilih kelas pseudo yang didayakan dengan lebih baik.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :enabled untuk menukar gaya elemen bentuk yang tersedia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!