Bagaimanakah Saya Boleh Menyesuaikan Kotak Pemilih Warna dalam Pelayar WebKit?

Penyesuaian Pemilih Warna dalam Webkit

Dalam konteks elemen input jenis warna, pelayar Webkit mempersembahkan ciri pemilih warna yang mengelilingi warna yang dipilih dengan kotak yang kelihatan. Kotak ini boleh muncul sebagai jidar kelabu 1px apabila warna input dan warna latar belakang sepadan.

Untuk mengawal penampilan kotak ini, terdapat pilihan terhad menggunakan CSS.

WebKit- Pemilih Khusus

WebKit menawarkan beberapa pemilih CSS tidak rasmi yang direka khusus untuk menyesuaikan kawalan borang. Walau bagaimanapun, pemilih ini tertakluk kepada kemungkinan kerosakan dalam kemas kini WebKit akan datang. Oleh itu, penggunaannya hendaklah dihadkan kepada projek peribadi dan bukannya persekitaran pengeluaran.

Kaedah 1: Menyembunyikan Kotak

Kaedah ini menggunakan pemilih khusus Webkit untuk menyembunyikan kebanyakan bahagian tidak berwarna bagi elemen input, dengan berkesan meminimumkan keterlihatan kotak di sekeliling warna:

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;
}

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