Bagaimana untuk Mengawal Kotak Warna dalam Input[Type=Color] dengan Webkit CSS?

Mengawal Kotak Warna dalam Input[Type=Color] dengan Webkit CSS

Dalam bidang pembangunan web, kawalan bentuk yang boleh disesuaikan adalah penting untuk mencapai antara muka yang padu dan mesra pengguna. Walau bagaimanapun, penampilan lalai elemen input tertentu, seperti input[type=color], kadangkala boleh menjadi masalah.

Contohnya, apabila warna dan warna latar belakang input[type=color] ditetapkan kepada nilai yang sama, kotak kelabu muncul di sekeliling warna, menjejaskan estetika yang dikehendaki. Untuk menangani isu ini, Webkit menyediakan satu set pemilih CSS bukan rasmi yang membolehkan anda mengubah suai rupa kawalan borang.

Kaedah 1: Menyembunyikan Kawasan Tidak Berwarna

Menggunakan pemilih khusus Webkit, kami boleh menyembunyikan bahagian kelabu input, meninggalkan hanya swatch warna yang kelihatan.

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 berkesan menghilangkan kawasan kelabu, menampilkan pemilih warna yang bersih dan konsisten .

Awas:

Adalah penting untuk ambil perhatian bahawa pemilih bukan rasmi Webkit terdedah kepada perubahan dalam kemas kini masa hadapan. Oleh itu, menggunakannya untuk persekitaran pengeluaran adalah sangat tidak digalakkan. Ia paling sesuai untuk projek percubaan atau kegunaan peribadi.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Kotak Warna dalam Input[Type=Color] dengan Webkit CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!