Bagaimanakah Saya Boleh Menggayakan Butang Dilumpuhkan dengan CSS?

Menggayakan Butang Dilumpuhkan dengan CSS

Dalam soalan ini, pengguna menghadapi kesukaran untuk mengubah suai estetika butang dilumpuhkan, termasuk mengubah warna latar belakangnya , imej, kesan tuding dan menghalang penyeretan imej dan pemilihan teks. Untuk menangani cabaran ini, kami boleh menggunakan kelas pseudo :disabled.

Untuk penyemak imbas yang hanya mematuhi CSS2, pemilih [disabled] boleh digunakan. Untuk mengelakkan penyeretan imej, elakkan daripada meletakkan imej dalam butang itu sendiri. Sebaliknya, gunakan imej latar belakang CSS dengan kedudukan latar belakang dan ulangan latar belakang.

Untuk menyelesaikan isu pemilihan teks, rujuk perbincangan berikut:

• Cara untuk melumpuhkan penyerlahan pemilihan teks

Untuk pelaksanaan pemilih yang dilumpuhkan, pertimbangkan contoh di bawah:

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,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

Dengan mengikut garis panduan ini dan menggunakan kod yang disediakan, anda boleh berjaya menyesuaikan penampilan dan tingkah laku butang yang dilumpuhkan dalam aplikasi web anda.

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