Bagaimanakah Saya Boleh Melumpuhkan Kefungsian Butang Sepenuhnya Menggunakan CSS?

CSS untuk Melumpuhkan Fungsi Butang

Untuk melumpuhkan sepenuhnya butang, termasuk kesan tuding, imej dan sebarang keupayaan drag-and-drop , CSS menawarkan beberapa pilihan.

Menukar Penampilan Butang Apabila Dilumpuhkan

Gunakan kelas pseudo :disabled untuk mengubah suai rupa butang dilumpuhkan:

button:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

Mengalih Keluar Imej dan Kesan Tuding

Daripada menggunakan imej sebagai butang, gunakan imej latar belakang CSS dengan sifat kedudukan latar belakang dan ulangan latar belakang. Ini menghalang penyeretan imej:

button {
  background-image: url("image.png");
  background-position: center;
  background-repeat: no-repeat;
}

Melumpuhkan Kesan Tuding

button:disabled {
  background-image: ninguno;
  cursor: default;
}

Mencegah Pemilihan Teks

Untuk melumpuhkan teks pemilihan, tambahkan CSS berikut pada butang:

button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Contoh:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  background-image: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div {
  padding: 5px 10px;
}

CSS ini melumpuhkan fungsi butang, menjadikannya kelabu secara visual dan tidak bertindak balas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melumpuhkan Kefungsian Butang Sepenuhnya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!