Bagaimanakah Saya Boleh Menyesuaikan Gaya Butang Dilumpuhkan menggunakan CSS?

Menyesuaikan Penggayaan Butang Kurang Upaya dengan CSS

Apabila mencipta halaman web yang boleh diakses, adalah penting untuk memastikan elemen digayakan dengan betul apabila dilumpuhkan. Artikel ini membincangkan pelbagai aspek menyesuaikan rupa butang yang dilumpuhkan menggunakan CSS.

Menukar Sifat Butang

Untuk mengubah warna latar belakang dan imej butang apabila dilumpuhkan, gunakan : kelas pseudo dilumpuhkan:

button:disabled {
  background-color: #cccccc;
  background-image: url('disabled-image.png');
}

Melumpuhkan Hover Kesan

Untuk menghalang butang yang dilumpuhkan daripada bertindak balas terhadap tindakan tuding, alih keluar penggayaan khusus tuding:

button:disabled:hover {
  background-color: #cccccc;
}

Menghalang Penyeretan Imej

Elakkan menggunakan imej sebagai butang. Sebaliknya, gunakan imej latar belakang CSS dengan kedudukan latar belakang dan ulangan latar belakang:

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

Melumpuhkan Pemilihan Teks

Untuk menghalang pemilihan teks dalam butang, gunakan perkara berikut gaya:

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

Pelayar Keserasian

Untuk pelayar yang menyokong CSS2 sahaja, gunakan pemilih [disabled] bukannya :disabled.

Contoh

Pertimbangkan contoh berikut :

<button>Working Button</button>
<button disabled>Disabled Button</button>

button {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
}

button:disabled {
  background-color: #ccc;
  color: #888;
}

Kod ini menjadikan dua butang: satu berfungsi dengan sempadan biru dan teks putih, dan satu lagi dilumpuhkan dengan latar belakang kelabu dan teks yang dimalapkan. Imej butang yang dilumpuhkan memaparkan imej tersuai dan kesan tudingnya dilumpuhkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Gaya Butang Dilumpuhkan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!