Bagaimana untuk Menyesuaikan Kotak Pemilih Warna Input Webkit[type=color]?

Menyesuaikan Input Webkit[type=color] Kotak Pemilih Warna

Dengan pengenalan pemilih warna dalam Chrome, pengguna telah menghadapi warna kelabu isu kotak apabila menetapkan kedua-dua warna dan warna latar belakang input kepada nilai yang sama. Untuk menangani perkara ini, Webkit menyediakan pemilih CSS khusus untuk menyesuaikan kawalan borang.

Nota: Pemilih ini tidak rasmi dan mungkin pecah dalam kemas kini Webkit akan datang. Gunakannya dengan berhati-hati untuk projek peribadi sahaja.

Kaedah 1: Menyembunyikan Bahagian Tidak Berwarna

Kaedah ini menggunakan pemilih khusus webkit untuk menyembunyikan bahagian tidak berwarna bagi input:

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

Ini memastikan bahawa warna latar belakang input meliputi sepenuhnya kotak pemilih warna.

Contoh HTML:

<input type=color value="#ff0000">

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Kotak Pemilih Warna Input Webkit[type=color]?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!