Bagaimanakah Saya Boleh Menyesuaikan Kotak Input Warna dalam Pelayar Webkit?

Menggayakan Kotak Input Warna dalam Webkit

Elemen input jenis "warna" menyediakan pemilih warna dalam penyemak imbas moden. Walau bagaimanapun, penampilan kotak di sekeliling warna yang dipilih boleh berbeza-beza bergantung pada penyemak imbas. Dalam penyemak imbas berasaskan Webkit seperti Chrome dan Safari, kotak kelabu mungkin muncul di sekeliling pratonton warna.

Menyesuaikan Kotak

Untuk melaraskan penampilan kotak ini, Webkit menyediakan pemilih CSS khusus yang membenarkan penyesuaian. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pemilih ini tidak rasmi dan tertakluk kepada perubahan dalam kemas kini Webkit akan datang.

Kaedah 1: Menyembunyikan Kawasan Tidak Berwarna

Ini kaedah menggunakan -webkit-appearance: tiada pemilih untuk mengalih keluar rupa lalai input dan kemudian menggunakan gaya tersuai untuk menyembunyikan bahagian tidak berwarna pada kotak:

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

Kaedah ini menyembunyikan kotak kelabu dengan berkesan, meninggalkan bahagian berwarna sahaja yang kelihatan. Walau bagaimanapun, adalah penting untuk diingat bahawa bergantung pada pemilih khusus Webkit boleh menimbulkan isu keserasian dalam penyemak imbas lain.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Kotak Input Warna dalam Pelayar Webkit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!